• 首页课程Javascript趣味课堂添加和移除元素

    添加和移除元素

    目录列表

    添加和移除元素

    添加和移除元素

    使用以下方法创建新节点:

    element.cloneNode() 克隆元素并返回结果节点。

    document.createElement(element) 创建一个新的元素节点。

    document.createTextNode(text) 创建一个新的文本节点。

    例如:

    var node = document.createTextNode("一些新的文本");

    这将创建一个新的文本节点,但它将不会出现在文档中,直到您使用以下方法之一将其附加到现有元素:

    element.appendChild(newNode) 将一个新的子节点添加到元素作为最后一个子节点。

    element.insertBefore(node1, node2) 在节点2之前插入node1作为子节点。

    例如:

    <div id ="demo">一些文本</div>
    <script>
      //创建一个新的段落
      var p = document.createElement("p");
      var node = document.createTextNode("一些新的文本");
      //添加文本到段落
      p.appendChild(node);
      var div = document.getElementById("demo");
      //将段落添加到div中
      div.appendChild(p);
    </script>


    创建一个新的
  • 元素添加到id =“list”的无序列表中。
  • var el = document.("li"); 

    var txt = document.createTextNode("B");

    el.appendChild(txt); 

    var ul = document.getElementById("");

    ul.(el);


    移除元素

    移除元素

    要删除HTML元素,您必须选择元素的父项并使用 removeChild(node) 方法。

    例如:

    <div id="demo">
      <p id="p1">这是一个段落.</p>
      <p id="p2">这是另外一个段落.</p>
    </div>
    <script>
    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.removeChild(child);
    </script>

    这样会从页面中删除 id ="p1" 的段落。

    提示: 实现相同结果的另一种方法是使用 parentNode 属性来获取要删除的元素的父项:

    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);


    在页面中删除节点元素(par为节点的父节点)。

    var par = document.getElementById("par"); 

    var node = document.getElementById("node");

    .();


    替换元素

    替换元素

    要替换HTML元素,使用 element.replaceChild(newNode,oldNode) 方法。

    例如:

    <div id="demo">
      <p id="p1">这是一个段落</p>
      <p id="p2">这是另一个段落</p>
    </div>
    <script>
    var p = document.createElement("p");
    var node = document.createTextNode("这是新的文本");
    p.appendChild(node);
    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.replaceChild(p, child);
    </script>

    提示: 上面的代码创建一个替换现有 p1 段落的新段落元素。


    哪个方法用来替换节点?

    PHP中文网