html更新节点,html dom javascript 节点处理

1.添加节点(将新元素作为父元素的最后一个子元素进行添加。)

这是一个段落。

这是另一个段落。

var para=document.createElement("p");

var node=document.createTextNode("这是一个新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

var child=document.getElementById("p1");

element.insertBefore(para,child);

2.添加节点(在某个id之前插入节点)

这是一个段落。

这是另外一个段落。

var para=document.createElement("p");

var node=document.createTextNode("这是一个新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

var child=document.getElementById("p1");

element.insertBefore(para,child);//para为插入的内容，child为将插在id为p1的节点之前

3.删除节点

这是一个段落。

这是另一个段落。

var parent=document.getElementById("div1");

var child=document.getElementById("p2");

parent.removeChild(child);//从父元素中删除子元素

//var child=document.getElementById("p1");

//child.parentNode.removeChild(child);//不引用父节点的情况下删除子节点

4.替换节点

这是一个段落。

这是另外一个段落。

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

var para=document.createElement("p");

var node=document.createTextNode("这是一个新的段落。");

para.appendChild(node);

parent.replaceChild(para,child);

标签：段落,para,dom,javascript,getElementById,html,child,var,document

来源： https://www.cnblogs.com/hai-/p/13696398.html