document对象方法createElement()
元素对象方法appendChild()
元素对象方法insertBefore(新元素，原节点)
元素对象方法removeChild(元素)
元素对象属性firstChild
元素对象属性childNodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
var dv = this.document.getElementById('dv');
this.document.getElementById('btnAddImage').onclick = function () {
var img = document.createElement('img');
img.src = '1.jpg';
dv.appendChild(img);
};
this.document.getElementById('btnAddSpan').onclick = function () {
var span = document.createElement('span');
span.innerText='Hello'
dv.appendChild(span);
};
this.document.getElementById('btnAddLink').onclick = function () {
var a = document.createElement('a');
//a.innerHTML = '<img src=1.jpg></img>';
//a.innerText = '百度';
a.innerHTML = '百度';
a.href = 'http://www.baidu.com';
dv.appendChild(a);
};
this.document.getElementById('btnClear').onclick = function () {
//第一种方式
//while (dv.hasChildNodes()) {
// dv.removeChild(dv.childNodes[0]);
//};
//第二种方式，用for，必须从后往前删除
var nodes = dv.childNodes;
for (var i = nodes.length - 1; i >= 0; i--) {
dv.removeChild(nodes[i]);
}
};
};
</script>
</head>
<body>
<input type="button" id="btnAddImage" name="name" value="添加图片" />
<input type="button" id="btnAddSpan" name="name" value="添加文字" />
<input type="button" id="btnAddLink" name="name" value="添加链接" />
<input type="button" id="btnClear" name="name" value="清空div" />
<div id="dv"></div>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
