DOM基础之插入元素(JS)

作者:admin   时间:2020-07-09   访问量:1

  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/56.html转载请注明出处


相关文章
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:

switch-case基本用法与注意事项

switch-case 一般的用它来做值匹配的。switch-case其实也是可以做范围匹配的。 但是不推荐。

总结js常用的dom操作(js的dom操作API)

本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统。不能说是API,今天来系统总结一下!

js数据类型转换

js里的数据类型转换 1、类型转换 转换为字符串 - String(x)- x.toString(x, 10)- x+'' 转换为数字 - Number(x)- parseInt(x, 10) - parseFloat(x)...

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