createElement 创建元素
- document.createElement() 可以创建一个元素
- document.createTextNode() 创建一个文本节点
- appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
<div id="demo">
<p id="p1">这是文本内容</p>
</div>
<script>
// div下添加一个子元素节点，放到p标签下
btn = document.createElement('button');
// 给button添加文本节点
btn.appendChild(document.createTextNode('点我'))
div = document.getElementById('demo');
// div 添加子节点
div.appendChild(btn);
</script>
insertBefore() 方法
- insertBefore() 方法可在已有的子节点前插入一个新的子节点。
- 语法：node.insertBefore(newnode,existingnode)
- 如果第二个参数传null，跟 appendChild() 方法实现效果一样，在div后面加子元素
<div id="demo">
<p id="p1">这是文本内容</p>
</div>
<script>
// 创建元素节点
btn = document.createElement('button');
// 给button添加文本节点
btn.appendChild(document.createTextNode('点我'))
div = document.getElementById('demo');
// div 添加子节点
div.insertBefore(btn, document.getElementById('p1'));
</script>
removeChild 移除子节点
<div id="demo">
<p id="p1">这是文本内容</p>
<p id="p2">hello world</p>
</div>
<script>
div = document.getElementById('demo');
div.removeChild(document.getElementById('p1'));
</script>
replaceChild 替换子节点
<div id="demo">
<p id="p1">这是文本内容</p>
<p id="p2">hello world</p>
</div>
<script>
// 创建节点
btn = document.createElement('button');
// 给button添加文本节点
btn.appendChild(document.createTextNode('点我'))
div = document.getElementById('demo');
div.replaceChild(btn, document.getElementById('p2'));
</script>
更简单方法
- appendChild，insertBefore, removeChild, replaceChild 这几个方法都依赖于父元素。还有几个更简便的方法，不依赖于父元素，可以直接在当前元素操作
//after 取代 appendChild
<div id="demo">
<p id="p1">这是文本内容</p>
<p id="p2">hello world</p>
</div>
<script>
// 创建节点
btn = document.createElement('button');
// 给button添加文本节点
btn.appendChild(document.createTextNode('点我'))
// p2标签前面添加元素
div = document.getElementById('p2');
div.after(btn);
</script>
//before 可以取代insertBefore
<div id="demo">
<p id="p1">这是文本内容</p>
<p id="p2">hello world</p>
</div>
<script>
// 创建节点
btn = document.createElement('button');
// 给button添加文本节点
btn.appendChild(document.createTextNode('点我'))
// p2标签前面添加元素
div = document.getElementById('p2');
div.before(btn);
</script>
//remove 删除指定元素
<div id="demo">
<p id="p1">这是文本内容</p>
<p id="p2">hello world</p>
</div>
<script>
div = document.getElementById('p2');
div.remove();
</script>
## 总结
