文章目录

目录

 文章目录

前言

创建新的 HTML 元素

createElement() 方法

示例

注意：

appendChild() 方法

示例

insertBefore()方法

示例

注意：

删除已有的 HTML 元素

removeChild()方法

示例

注意:

示例

替换 HTML 元素

 replaceChild()方法

注意：

前言

大家好，我是遇见ice。

个人主页：遇见ice的博客

本文讲了JS HTML DOM中元素的创建并插入、删除、修改等内容。

走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，大家一起加油呀！笔芯

 

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，首先必须创建该元素节点，然后把它追加到已有的元素上。

createElement() 方法

createElement() 方法通过指定名称创建一个元素

示例

        
    
这是一个段落。
    
这是另一个段落。
    //用createElement创建一个p元素    var sec =document.createElement("p");    //创建一个文本节点    var node=document.createTextNode("这是一个新段落。");    //将文本节点添加到新创建的元素中    sec.appendChild(node);    //创建一个element对象获取div中的所有元素    var element=document.getElementById("div1");    //将添加过文本内容的p元素添加到element对象的子节点的末尾。    element.appendChild(sec);

注意：

1.createElement()创建了一个新的元素，参数是String类型的创建元素的名称
2.createElement()方法常和appendChild()一起用。createElement()方法创建元素后，一般用appendChild()加入内容。

appendChild() 方法

上述代码中用到的appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

appendChild() 方法如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。可以使用 appendChild() 方法移除元素到另外一个元素。

示例

        
Coffee
Tea
Water
Milk
Milk
点我    //用函数进行此操作    function myFunction(){ var node=document.getElementById("myList2").lastChild; document.getElementById("myList1").appendChild(node);    }

insertBefore()方法

前文案例中的appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。如果需要将新元素添加到开始位置，可以使用 insertBefore() 方法。

示例

        
    
这是一个段落。
    
这是另外一个段落。
    //用createElement创建一个p元素    var sec =document.createElement("p");    //创建一个文本节点    var node=document.createTextNode("这是一个新段落。");    //将文本节点添加到新创建的元素中    sec.appendChild(node);    //创建一个element对象获取div中的所有元素    var element=document.getElementById("div1");    //创建一个child对象获取id为p1对应的元素    var child=document.getElementById("p1");    //在element中将新创建的并且加入文本节点之后的元素sec，插入到child元素前。    element.insertBefore(sec,child);

注意：

1. insertBefore() 方法是在被选元素前插入 HTML 元素。

2.如需在被选元素后插入 HTML 元素，使可用 insertAfter() 方法。

3.如果参数是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之前。

删除已有的 HTML 元素

removeChild()方法

删除使用的是removeChild()方法，参数是要删除的对象。返回值是removeChild前的那个父节点。

示例

        
    
这是一个段落。
    
这是另一个段落。
    //创建一个parent对象获取div中的所有元素    var parent=document.getElementById("div1");    //创建一个child对象获取id为p1对应的元素    var child=document.getElementById("p1");    //删除父元素parent下的某个子节点child    parent.removeChild(child);

注意:

1.如需删除 HTML 元素，您必须清楚该元素的父元素。DOM 需要了解您需要删除的元素，以及它的父元素，所以无法在不引用父元素的情况下删除某个元素。

2.如果不清楚父元素，可以先找到您需要删除的子元素，然后使用parentNode属性来查找其父元素

示例

        
    
这是一个段落。
    
这是另一个段落。
    var child=document.getElementById("p1");    child.parentNode.removeChild(child);

替换 HTML 元素

 replaceChild()方法

使用 replaceChild() 方法来替换 HTML DOM 中的元素。

        
    
这是一个段落。
    
这是另外一个段落。
    //用createElement创建一个p元素    var sec =document.createElement("p");    //创建一个文本节点    var node=document.createTextNode("这是一个新段落。");    //将文本节点添加到新创建的元素中    sec.appendChild(node);    //创建一个element对象获取div中的所有元素    var parent=document.getElementById("div1");    //创建一个child对象获取id为p1对应的元素    var child=document.getElementById("p1");    //在parent中将新创建的并且加入文本节点之后的元素sec，替换child元素。    parent.replaceChild(sec, child);

注意：

1.replaceChild() 方法可将某个子节点替换为另一个。新节点可以是文本中已存在的，或者是你新创建的。

2. 新节点是要插入的节点对象，括号内第一个。之前的节点是要移除的节点对象，括号内的后一个。

3.返回值为替换的新节点。

创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖