DOM基础之插入元素(JS)

时间:2020-03-22   访问量:13

  JS插入元素有两种方法

  1 appendChild()

  2 insertBefore()

  1.在JavaScript中我们可以使用appendChild()方法把一个新元素插入到父元素内部子元素的末尾

  语法:A.appendChild(B);

  说明:

  A代表父元素,B表示动态创建好的新元素,即子元素

  实例:

  window.οnlοad=function()
  {
      var oBtn=document.getElementById("btn");
      //为按钮添加点击事件
      oBtn.οnclick=function()
      {
          var oU1=document.getElementById("list");
          var oTxt=document.getElementById("txt");
          //将文本框的内容转换为“文本节点”
          var textNode=document.createTextNode(oTxt.value);
          //动态创建一个li元素
          var oLi=document.createElement("li");
          //将文本节点插入到Li元素中
          oLi.appendChild(textNode);
          //将li元素插入到u1元素中去
          oU1.appendChild(oLi);
          };
  }

  分析:

  oBtn.οnclick=function()
    {
      ......
     };

  上面表示为一个元素添加点击事件,所谓的点击事件就是我们点击按钮后会做些什么,这个跟之前讲到的window.onload是非常相似的,只不过window.onload表示页面加载完后会做些什么,而oBtn.click表示点击按钮后会做些什么

  2.insertBefore(0

  在JavaScript中我们可以使用InsertBefore()方法将一个新元素插入到父元素中的某一个子元素之前

  语法:

  A.insertBefore(B,ref);

  说明:

  A表示父元素,B表示新子元素。ref表示指定子元素,在这个元素之前插入新元素。

  分析:oU1.firstElementChild表示获取u1元素下的第一个子元素。appendChild()和insertBefore()这两种方法是互补关系,appendChild实在父元素最后一个子元素后面插入,而insertBefore()是在父元素任意一个子元素之前插入,这样可以使我们将新元素插入到·任何地方


【地址】:http://www.inseo.cn/seo/88.html转载请注明出处


相关文章
for循环里的定时器引发···

  在学习js的时候,或者面试的时候,会经常碰到这一道经典题目:  for(vari=0;i<···

Javascript中while和i···

  大树最近在Javascript的一个学习案例中发现while条件和if条件还是有一些区别的,之前···

常用正则表达式汇总

  记录一些常用的正则表达式,也可以提高一下工作效率嘛  正则表达式基本语法  格式:re=new ···



Copyright © 2018-2020 大树SEO All Rights Reserved.