（一）动态创建元素
1.通过innerHTML创建元素
语法：元素.innerHTML = '内容';
代码举栗：
<body>
<button>add</button>
<ul>
<li>列表项</li>
</ul>
<script>
//更新ul中的内容，动态添加li
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
var old = ul.innerHTML; //原有的li
ul.innerHTML = old + '<li>new list</li>';
}
</script>
</body>
innerHTML适用于少量的拼接，因为字符串大量拼接时有性能问题。
2.通过document.createElement创建元素
语法：document.createElement('标签名'); //返回一个新的元素对象
代码举栗：
<body>
<button>add</button>
<ul>
<li>列表项</li>
</ul>
<script>
//更新ul中的内容，动态添加li
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
var newChild = document.createElement('li');
newChild.innerText = '新元素'; //设置内容，给谁设置谁就点
ul.appendChild(newChild); //追加元素
};
</script>
</body>
3.两种方法比较
createElement不需要拼接，会自动追加到下一项。运行速度比innerHTML拼接要快。（推荐使用）
innerHTML大量拼接字符串时速度慢。
(二)动态追加元素
1.语法：父元素.appendChild(子元素);
函数封装注意：对于函数体中不能写死的地方用参数。
代码举栗：
<button>创建li</button>
<ul>
<li>我是li</li>
</ul>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
// 创建一个新的li元素
var newLi = document.createElement('li');
// 追加
ul.appendChild(newLi);
// 设置内容
newLi.innerText = '我是新来的li';
};
</script>
（三）删除元素
语法：父元素.removeChild(子元素);
confirm(); 提示是否确认删除，返回布尔值。
代码举栗：
<ul>
<li>我是li1</li>
<li class="li2">我是li2</li>
<li>我是li3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var li2 = document.querySelector('.li2');
// 移除第二li
ul.removeChild(li2);
</script>
（四）其他元素
1.插入元素
语法：父节点.insertBefore(新的节点,旧的子节点)
2.替换元素
语法：父节点.replaceChild(新的节点,旧的子节点)
3.克隆元素
语法：元素.cloneNode(true或false); 返回一份新的克隆后的元素，默认值false
true，克隆该元素的所有内容
false，仅仅克隆外层标签
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ul>
<div>
<h2>我是div中的标题</h2>
<span>我是span</span>
<button>按钮</button>
<p>段落</p>
</div>
<script>
var ul = document.querySelector('ul');
var oldLi = ul.children[0];
// 创建一个新的li
var newLi = document.createElement('li');
newLi.innerText = '我是新的li';
// 【插入】
// ul.insertBefore(newLi,oldLi);
// 替换
// ul.replaceChild(newLi,oldLi);
// 【获取div】
var div = document.querySelector('div');
// 【克隆】
// var newDiv = div.cloneNode(); // 默认是false，表示仅仅克隆外层标签
var newDiv = div.cloneNode(true); // 若是true，会克隆该元素的所有内容
document.body.appendChild(newDiv);
</script>
网友评论