javascript中创建节点修改节点删除节点

最新推荐文章于 2024-05-28 00:30:00 发布

蓝色的天空下

最新推荐文章于 2024-05-28 00:30:00 发布

阅读量7.3k

点赞数

分类专栏： JavaScript 文章标签： javascript div xhtml button html function

本文链接：https://blog.csdn.net/duliming1987/article/details/6877587

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

javascript中创建节点可以通过create***方法进行创建，也可以用cloneNode方法。

create***方法：

1.、createElement()方法用于在HTML中创建新的元素。

2.、createTextNode()方法用于创建一个文本节点。

3、createDocumentFragment()方法用于创建一个文本片段(DocumentFragment)，在文档片段中可以添加各种节点，最后一次性添加到html页面中。使用这种编程模式可以减少页面更新的次数，提高页面显示的效率。

下面对这三三种方法进行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js创建节点</title>
<script language="javascript">
 function add(){
  var div1 = document.getElementById("div1");
  var newButton = document.createElement("input");
  var newTextNode = document.createTextNode("new Text");
  newButton.type = "button";
  newButton.value = "newButton";
  div1.appendChild(newButton);
  div1.appendChild(newTextNode);
 }
 function addFragment(){
  var div1 = document.getElementById("div1");
  var newButton = document.createElement("input");
  newButton.type = "button";
  newButton.value = "newButton";
  var newTextNode = document.createTextNode("new Text");
  var newDocFragment = document.createDocumentFragment();
  newDocFragment.appendChild(newButton);
  newDocFragment.appendChild(newTextNode);
  div1.appendChild(newDocFragment);
  
 }
</script>
</head>
<body>
<div id="div1" align="center">
</div>
<input type="button" value="addButton" οnclick="add()"/>
<input type="button" value="addFragment" οnclick="addFragment()"/>
</body>
</html>

以上代码实现了。但是遇到比较复杂的网页这样的添加方法使得代码特别难以维护和复杂。所有可以使用cloneNode方法来复制HTML中已有的节点。对于在网页中创建多个类似节点的情况，可以准备一个模板节点，创建新节点时首先用cloneNode方法获得模板节点副本，然后根据实际应用的需要对该副本节点进行局部内容的修改。使用cloneNode方法是一种非常高效的创建节点的方式，特别是对于复杂的页面。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js创建节点</title>
<style type="text/css">
div{border-bottom:1px dotted #e63}
</style>
<script language="javascript">
	var i = 0;
	function add(){
		var div1 = document.getElementById("div1");
		var divParent = div1.parentNode;
		var clone = div1.cloneNode(true);
		//设置id属性保证其不重复
		clone.id = "div" + i;
		clone.firstChild.innerHTML += " " + (i++);
		divParent.appendChild(clone);
		}
</script>
</head>

<body>
<div id="div1" align="center">
	<h1>Template</h1>
	<p>
	sometext...
	</p>
</div>
<input type="button" value="cloneElement" οnclick="add()"/>
</body>
</html>

DOM中可以使节点发生变化的常用方法如下：

appendChild:为当前节点新增一个新的节点，并且作为最后一个子节点。

insertBefore:为当前节点新增一个子节点，将其插入到指定子节点之前。

replaceChild:将当前节点的某个子节点替换为其他节点。

removeChild:删除当前节点的某个子节点。

所以对于删除和修改如上例子所示写就可以啦。