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);