《JavaScript视频17》DOM增删改

最新推荐文章于 2022-08-03 15:42:41 发布

原创最新推荐文章于 2022-08-03 15:42:41 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用JavaScript的createElement(), createTextNode()等方法进行DOM元素的创建、文本节点的添加，并展示了appendChild(), insertBefore(), replaceChild(), removeChild()以及innerHTML的运用实例，以及结合使用它们进行高效DOM操作的方法。

DOM增删改

document.creatElement()

可以创建一个元素节点对象
需要一个标签名作为参数，将会根据该标签名创建元素节点对象
并将创建好的对象作为返回值返回

document.creatTextNode()

可以创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点
并将新的节点返回

appendChild()

向一个父节点中添加一个新的子节点
用法：父节点.appendChild(子节点);

insertBefore()

在指定的子节点前面插入新的子节点
语法：父节点.insertBefore(新节点,旧节点);

replaceChild()

可以使用指定的子节点替换已有的旧节点
语法：父节点.replaceChild(新节点,旧节点);

removeChild()

删除一个子节点
语法：父节点.removeChild(子节点);

但是这种语法比较麻烦，我们常用下面的语法：

子节点.parentNode.removeChild(子节点);

使用innerHTML也可以完成DOM增删改的操作

city.innerHTML += "<li>广州<li>";

但是这种方式会造成负载增加，我们通常会两种结合使用

我们先增加一个标签
通过innerHTML来为这个新的标签增加内容
然后将这个新的标签添加到原来的界面中

<script type="text/javascript">
	window.onload = function(){
		function myClickFun (name, fun){
			var btn = document.getElementById(name);
			btn.onclick = fun;
		};
		
		myClickFun("buttons",function(){
			var li = document.createElement("li");
			li.innerHTML = "永城";
			var citys = document.getElementById("list");
			citys.appendChild(li);
		})
		
	};
</script>

方法二：

myClickFun("buttons",function(){
	var li = document.createElement("li");
	var text = document.createTextNode("永城");
	li.appendChild(text);
	var citys = document.getElementById("list");
	citys.appendChild(li);
})