zoukankan      html  css  js  c++  java
  • JS插入新的节点

    insertBefore()

    语法:

    insertBefore(newchild,refchild)

    newchild 插入新的节点

    refchild 在此节点前插入新节点

    <ul id="myList">

      <li>Coffee</li>

      <li>Tea</li>

    </ul>

    function myFunction(){

        var newItem=document.createElement("LI")

        var textnode=document.createTextNode("Water")

        newItem.appendChild(textnode)

        var list=document.getElementById("myList")

        list.insertBefore(newItem,list.childNodes[0]);

    }

    appendChild()

    语法:

    appendChild(newchild)

    newchild 所添加的节点

    <ul id="myList">

    <li>Coffee</li>

    <li>Tea</li>

    </ul>

    function myFunction(){

          var node=document.createElement("LI");

          var textnode=document.createTextNode("Water");

          node.appendChild(textnode);

          document.getElementById("myList").appendChild(node);

    }

    js写基础insertAfter()方法

    //DOM没有提供insertAfter()方法

    function insertAfter(newElement, targetElement){

         var parent = targetElement.parentNode;

         if (parent.lastChild == targetElement) {

    // 如果最后的节点是目标元素,则直接添加。因为默认是最后

              parent.appendChild(newElement);

       }else {

             parent.insertBefore(newElement, targetElement.nextSibling);

    //如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面

        }

    }

  • 相关阅读:
    2020年天梯赛补题报告
    补提报告...
    2020.11.14天梯赛练习*6 补题
    2020-11-08补题报告
    2020-10-30 — 补题报告
    10-24 补题
    2020.10.17天梯赛练习 和 16 号个人赛 补题报告
    elasticsearch DQL 有关表达式的设计
    tab键和空格键
    emacs配置python开发环境
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/7759996.html
Copyright © 2011-2022 走看看