js 动态操作元素

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnImage').onclick = function () {
var img = document.createElement('img');
img.src = "bird1.png";
document.getElementById('dv').appendChild(img);
};
document.getElementById('btnText').onclick = function () {
var input = document.createElement('input');
input.type = 'text';
document.getElementById('dv').appendChild(input);
};
document.getElementById('btnLink').onclick = function () {
var a = document.createElement('a');
a.innerText = '163';
a.href = 'http://www.163.com';
document.getElementById('dv').appendChild(a);
};
document.getElementById('btnDel').onclick = function () {
var nodes = document.getElementById('dv').childNodes;
while (nodes.length>0) {
document.getElementById('dv').removeChild(nodes[0]);
nodes = document.getElementById('dv').childNodes;
}

}
}
</script>
</head>
<body>
<input type="button" name="name" value="图片" id="btnImage" />
<input type="button" name="name" value="文本框" id="btnText" />
<input type="button" name="name" value="超链接" id="btnLink" />
<input type="button" name="name" value="删除" id="btnDel" />
<div id="dv">

</div>
</body>
</html>

巴特西

js 动态操作元素

最新文章

热门文章