当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js appendChild与insertBefore 区别和用法

js appendChild与insertBefore 区别和用法

2019年03月21日  | 移动技术网IT编程  | 我要评论
 
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);
      //第一个参数 添加的内容 第二个参数是在那个位置前面 添加
    }

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网