zoukankan      html  css  js  c++  java
  • js appendChild与insertBefore 区别和用法

     
    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点。
    比如:appendChild(newchild)括号里可以是创建的标签var newchild = document.createElement
     
    2.insertBefore() 方法:
    可在已有的字节点前中插入一个新的子节点。比如:insertBefore(newchild,rechild)
    参数:
    newnode: 要插入的新节点。
    node: 指定此节点前插入节点
     
    3.相同之处:插入子节点。
     
    4.不同之处:appendChild方法是在父节点中的字节点的末尾添加新的节点(相对于父节点来说)。
    insertBefor方法是在已有的节点前添加新的节点(相对于子节点来说的)
     
    HTML代码:
    <input type="button" value="增加" id="btn" />
      <ul id="ul">
        <li>第一个</li>
        <li>第二个</li>
      </ul>

    JS 代码:

    my$("btn").onclick = function () {
          //创建一个元素标签
          var li = document.createElement('li');
          //给元素设置内容
          li.innerText = ('新增一个内容');
          // 在父元素的后面添加
          my$('ul').appendChild(li);
        }
    
        my$("btn").onclick = function () {
          //创建一个元素标签
          var li = document.createElement('li');
          //给元素设置内容
          li.innerText = ('新增一个内容');
          // setInnnerText(li,'增加的');
          my$('ul').insertBefore(li, my$('ul').lastElementChild);
          //第一个参数 添加的内容 第二个参数是在那个位置前面 添加
        }
     
  • 相关阅读:
    $.extend用法详解(一)
    JQuery中$.each 和$(selector).each()的区别详解
    span元素和div元素的浮动效果
    $.ajax中contentType: “application/json” 的用法
    JS中获取URL的参数的方法
    移动端的touch事件(一)
    JS运算的优先级
    关于更新发布CSS和JS文件的缓存问题
    small标签
    DP:三角形的最小路径和
  • 原文地址:https://www.cnblogs.com/wanguofeng/p/10565183.html
Copyright © 2011-2022 走看看