var box=document.createElement("div")
2、添加到文档树中,x.appendChild(y) 把y节点对象添加到x节点中
box.appendChild(box2)
3、增加类名(classList.add()方法)
box2.classList.add("box2")
等同于
3.1、增加多个类名(className)
box2.className="box2 box3"
4、增加节点(insertBefore()方法)
<div class="box"> <div class="box2">hello1</div> <div class="box2">hello2</div> <div class="box2">hello3</div> <div class="box2">hello4</div> </div> <script> var box=document.querySelector(".box") var a1=document.createElement("h1") a1.innerHTML="6666" box.insertBefore(a1,box.children[2]) </script>
网页效果:
4.1、insertAfter方法(需要自己封装)
function insertAfter(El,targetEl){ var parent=targetEl.parentNode; if(parent.lastChild==targetEl) { parent.appendChild(newEl); } else { parent.insertBefore(El,targetEl.nextSibling); }}
box2.classList.remove("box2")
box.parentElement.removeChild(box)
3、删除自己
box.remove()
4、清空自己
box.parentElement.innerHTML=""
5、删除元素
box.removeChild()
box2.innerHTML="6666"
注:6666会把box2内部的所有元素全部覆盖
box2.innerHTML+="<h1>6666</h1>"
<div id="box"></div><script> var box=document.querySelector("#box")</script>
var box2 = box.cloneNode()//不会克隆事件等var box2 = box.cloneNode(true)//连同box的后代元素和所有的事件 一起克隆var btn1 = btn.cloneNode(true)box.appendChild(btn1)//把克隆的btn1添加到box的子节点中去
节点对象怎么来的?
只有创建、添加进页面,才是真正的添加了节点,否则就是移动节点。
原文出处:JS:元素的增删改查发、克隆