JavaScript 操作节点的方法
一、创建节点
(1)创建文本节点
3)创建元素节点
创建标记名为 Tagname 的元素节点:
(4)复制节点
object指父节点,也就是说在父节点的末尾加入新节点。
(2)插入子节点(在另一个节点前插入新的节点)
参数 oChildNode 表示在 oChildNode 节点前插入节点;
object指定 oChildNode 节点的父节点;
参数 oChildNode 指定将要被替换掉的节点;
object指定 oChildNode 节点的父节点;
注意:被替换掉的节点必须是父对象的直接子节点。
(2)插入子节点(在另一个节点前插入新的节点)
参数 oChildNode 表示在 oChildNode 节点前插入节点;
object指定 oChildNode 节点的父节点;
四、删除节点
object指定要移除的节点的父节点;
完成后效果图:
一、创建节点
(1)创建文本节点
创建包含文本 Text 的文本节点:
oTextNode = document.createTextNode(Text);
(2)创建属性节点
用给定的名称 Name 创建属性节点:
oAttribute = document.createAttribute(Name);
3)创建元素节点
创建标记名为 Tagname 的元素节点:
oElement = document.createElement(Tagname);
(4)复制节点
oClone = object.cloneNode(true);
默认值为 false,指定只复制节点本身,不包含其子节点;
如果设置为true,则包含子节点。
object表示被复制的源节点
二、插入节点
(1)appendChild 追加子节点
oElement = object.appendChild(oNode);
参数 oNode 指定要追加到文档当中的新节点;object指父节点,也就是说在父节点的末尾加入新节点。
参考jQuery Dom插入节点:http://blog.csdn.net/asheandwine/article/details/78149298
//把元素节点追加到<body>中
document.body.appendChild(oElement);
(2)插入子节点(在另一个节点前插入新的节点)
oElement = object.insertBefore(oNewNode,oChildNode);
参数 oNewNode 指定要插入到文档中的新节点;参数 oChildNode 表示在 oChildNode 节点前插入节点;
object指定 oChildNode 节点的父节点;
三、替换节点
oReplace = object.replaceChild(oNewNode,oChildNode);
参数 oNewNode 指定要插入到文档中的新节点;参数 oChildNode 指定将要被替换掉的节点;
object指定 oChildNode 节点的父节点;
注意:被替换掉的节点必须是父对象的直接子节点。
(2)插入子节点(在另一个节点前插入新的节点)
oElement = object.insertBefore(oNewNode,oChildNode);
参数 oNewNode 指定要插入到文档中的新节点;参数 oChildNode 表示在 oChildNode 节点前插入节点;
object指定 oChildNode 节点的父节点;
//用oNewElement节点替换<body>中 oElement节点
document.body.replaceChild(oNewElement,oElement);
四、删除节点
oRemove = object.removeChild(oNode);
参数 oNode 指定要从文档中移除的节点;object指定要移除的节点的父节点;
//表示删除<body>中的 oElement节点
document.body.removeChild(oElement);
注意:要移除的节点必须是父节点的直接子节点。
例如 要从表格(table)中删除行,必须是从tbody中删除 tr 节点,而不能直接从table节点中删除tr节点
以下代码实现了在网页中加入
<p align="center">段落二</p> <p align="center">段落一</p> 的代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<!--
下边代码实现了在网页中加入<p align="center">段落二</p><p align="center">段落一</p>
的标记
-->
<script type="text/javascript">
//创建文本节点 内容为"段落一"
oTextNode=document.createTextNode("段落一");
//创建align属性节点
oAttribute=document.createAttribute("align");
//align加入指定的值 align="center"
oAttribute.nodeValue="center";
//创建p节点
oElement=document.createElement("p");
//把创建的属性节点插入到<p>中
oElement.attributes.setNamedItem(oAttribute);
// appendChild 追加子节点 把创建的文本节点添加到<p>中
//<p align="center">段落一</p>
oElement.appendChild(oTextNode);
//把<p>节点追加到<body>中
document.body.appendChild(oElement);
//复制当前<p>节点为oNewElement
oNewElement=oElement.cloneNode(true);
//修改oNewElement内容为"段落二"
oNewElement.innerHTML="段落二";
//把oNewElement 节点插入到<body>中 oElement节点之前
document.body.insertBefore(oNewElement,oElement);
</script>
</body>
</html>
完成后效果图: