javascript 插入DOM节点

1.使用appendChild，把一个子节点添加到父节点的最后一个子节点，.innerText插入的是内容

HTML

<!-- HTML结构 -->
<p id="js">react</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

2.插入一个节点到最后一项

var 
   react =document.getElementById("react");
   list = document.getElementById("list");
   list = appendChild(react);

　　更多的时候我们会创建一些原生节点

 比如我们插入一个p的标签名为：webpack。

 

 

 var 
    list = document.getElementById('list');
    webpack = document.getElementById('p')
    webpack.id = webpack;
    webpack.innerText= "打包工具"；
    list. appenChild(webpack);

　　显示

 

<!-- HTML结构 -->
<p id="js">react</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="webpack">打包工具</p>


</div>

　　

2.插入指定的位置：insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

多一个： ref = document.getElementById('XXXXX');
和list.insertBefore(XXXXX, ref);