原生JS中插入的姿势(操作DOM)

1.appendChild

<div id="app">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var p = document.createElement("p"); //创建一个p标签
var t = document.createTextNode("这是一个新的段落。");//为 <p> 元素创建一个新的文本节点：
p.appendChild(t);
 
var app = document.getElementById("app");//将文本节点添加到 <p> 元素中：
app.appendChild(p);//添加到已存在的元素中:
</script>

2.insertBefore

<div id="app">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var p = document.createElement("p");
var t = document.createTextNode("这是一个新的段落。");
p.appendChild(t);
 
var app = document.getElementById("app");
var p1 = document.getElementById("p1");
app.insertBefore(app, p1);
</script>

3.replaceChild 替换子节点

var div = document.createElement('div');
div.innerText = 'div';
ul.replaceChild(div,ul.children[0]); //(替换元素,被替换的元素)