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>
如果我们要把子节点插入到指定的位置怎么办?可以使用parentElement.insertBefore(newElement, referenceElement);
,子节点会插入到referenceElement
之前。
多一个: ref = document.getElementById('XXXXX'); 和list.insertBefore(XXXXX, ref);