js操作DOM对象（节点的增删改）

Posted 2020-10-13 亲亲的我来了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js操作DOM对象（节点的增删改）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>节点的增删改</title>
</head>
<body>
<ul>
    <li>大家辛苦了1</li>
    <li>大家辛苦了2</li>
    <li>大家辛苦了3</li>
    <li>大家辛苦了4</li>
    <li>大家辛苦了5</li>
    <li>大家辛苦了6</li>
    <li>大家辛苦了7</li>
    <li>大家辛苦了8</li>
    <li>大家辛苦了9</li>
    <li>大家辛苦了10</li>
    <li>大家辛苦了11</li>
    <li>大家辛苦了12</li>
</ul>


<script type="text/javascript">
    //首先获取页面中的第一个ul
    var ul= document.getElementsByTagName("ul")[0];
    //创建一个新的节点
    var  newLi=document.createElement("li");
    //给新节点的增加内容
    newLi.innerHTML="<h1>哈哈</h1>";
    //在第7 个位置之前 把新增的li放入
    var needLi= ul.getElementsByTagName("li")[6];
    //ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前
    //替换指定的节点
    var repLi= ul.getElementsByTagName("li")[9];
    ul.replaceChild(newLi,repLi);
    //删除指定的节点
    ul.removeChild(newLi);
    //clone  UL
    var newUl= ul.cloneNode(true);
    // 在body中增加 ul
    ul.parentNode.appendChild(newUl);
</script>



</body>
</html>

以上是关于js操作DOM对象（节点的增删改）的主要内容，如果未能解决你的问题，请参考以下文章

07.31《jQuery》——3.1jQuery实现DOM节点的增删改

JavaScript---网络编程-Dom模型(节点间的层次关系,节点的增删改)