添加节点

1.2 添加节点

1.2.1 创建节点

• 创建标签节点：document.createElement(“标签名”)；

• 创建文本节点：document.createTextNode(“文本内容”)

  //2.创建节点： document.createElement("标签名")
  var cLi = document.createElement("li");
  //cLi.innerHTML = "完成一个项目";
  
  //3.创建文本节点：document.createTextNode("文本内容")
  var text = document.createTextNode("完成两个项目");
  //把文本添加到标签中
  cLi.appendChild(text);
  

1.2.2 添加节点

• 追加 在父元素的末尾添加 父节点.appendChild(子节点)

  //2.创建节点： document.createElement("标签名")
  var cLi = document.createElement("li");
  cLi.innerHTML = "完成一个项目";
  //1.追加：在父元素的末尾添加  父节点.appendChild(子节点)
  oUl.appendChild(cLi);
  

• 在某个元素之前添加: 父节点.insertBefore(newChild，refChild)

  //4.在某个元素之前添加: 父节点.insertBefore(newChild，refChild)
  var iLi = document.createElement("li");
  iLi.innerHTML = "不吃饭";
  oUl.insertBefore(iLi,oLi[2]);
  

注意：添加一个已经存在的标签，发生物理位移