DOM节点的创建、插入、删除等经验集合

青旅半醒 2021-07-24 11:31 465阅读 0赞

目录

DOM节点的创建、插入、删除各种经验集合

一、DOM节点的创建

1.1 JS方法

1.1.1 HTML页面中：

1.1.2 JS页面中

1.2 JQ方法

二、DOM节点的插入

2.1 DOM内部插入

2.2 DOM外部插入

三、DOM节点的删除

DOM节点的创建、插入、删除各种经验集合

一、DOM节点的创建

主要流程和涉及的方法

  • 创建节点 ：createElement
  • 设置属性 ：setAttribute
  • 加入到目的地：append、appendTo、appendChild……

1.1 JS方法

1.1.1 HTML页面中：

style样式标签中：

  1. <style>
  2.     .left,
  3.     .right {
  4.         width: 300px;
  5.         height: 120px;
  6.     }
  7.     .right div {
  8.         width: 100px;
  9.         height: 90px;
  10.         padding: 5px;
  11.         margin: 5px;
  12.         float: left;
  13.         border: 1px solid #ccc;
  14.     }
  16.     </style>

script标签中：

  1. //创建2个div元素
  2.             var rightdiv = document.createElement('div')
  4.             //给2个div设置不同的属性
  5.             rightdiv.setAttribute('class', 'right')  //设置class为right
  7.             rightaaron.innerHTML = "动态创建DIV元素节点";
  9.                //绘制到页面body
  10.                body.appendChild(rightdiv)

1.1.2 JS页面中

  1. var LegendDIV=document.createElement("div");
  2.             LegendDIV.id="legendContainer";
  3.             LegendDIV.style.backgroundColor ="#FFFFFF";
  4.             LegendDIV.style.width="100px";
  5.             LegendDIV.style.height="320px";
  6.             LegendDIV.style.position="absolute";
  7.             LegendDIV.style.top='520px';
  8.             LegendDIV.style.left="85%";
  9.             //LegendDIV.style.border="1px groove DodgerBlue";
  10.             LegendDIV.style.backgroundColor='rgba(255,255,255,0)'
  11.             LegendDIV.style.display="block";
  12.             document.body.appendChild(LegendDIV);

1.2 JQ方法

创建元素节点：

  1. var  div  =$("<div></div>")

创建文本节点

  1. var  textDiv=$("<div>我是文本节点</div>")

创建带属性的复杂节点

  1. var  html=$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
  2. var  html=$("<div style='color:red'><div class='aaron'>动态创建DIV元素节点</div></div>")

二、DOM节点的插入

备注：所有节点的插入，前面、后面的概念是style设置上下左右的参照点

2.1 DOM内部插入

A.append(B):B插入A内部后面

A.appendTo(B):：A插入到B内部后面

A.prepend(B):B插入到A内部前面

A.prepend(B):A插入到B内部前面

2.2 DOM外部插入

外部插入，两个元素是兄弟之间的平级关系

A.after(B)：支持多参数，以逗号隔开，可以一次插入几个元素，向元素A外部后面添加元素B，AB

A.before(B):支持多参数，向元素A的外部前面添加B元素，BA

A.insertAfter(B)：不支持多参数，A元素插入到指定元素B的内部后面，如果指定元素B后面本来就有元素C了，即BC那将本来后面的元素后移，BAC

A.insertBefore(B):不支持多参数，A元素插入到指定元素B的外部的前面，如果指定元素本来前面有元素了，那将前面的元素前移，

三、DOM节点的删除

empty()：移除指定元素的所有子节点，只清空内部的HTML元素，但是标记仍留在DOM中

remove()：将元素自身移除的同时，也会移除元素内部的一切，包括事件、数据等

detach():保留数据的删除操作

发表评论

表情：
评论列表 （有 0 条评论，465人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaScript DOM 删除子节点

    这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。 一个元

    快来打我*快来打我*/ 0 赞/ 601 阅读

    相关 DOM删除节点

    一 介绍 删除节点通过使用removeChild()方法来实现。 removeChild()方法用来删除一个子节点。 obj. removeChild(oldChild)

    Bertha 。Bertha 。/ 0 赞/ 371 阅读

    相关 DOM插入节点

    一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 376 阅读