DOM对HTML元素的增删改操作

最新推荐文章于 2022-07-22 19:08:19 发布

lx__angel

最新推荐文章于 2022-07-22 19:08:19 发布

阅读量275

点赞数

文章标签： dom tag 增删改操作复制 javascript

本文链接：https://blog.csdn.net/lx__angel/article/details/78748475

版权

DOM创建节点的方法

document.createElement(Tag)，Tag必须是合法的HTML元素

DOM复制节点的方法

节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点全部后代节点。为false，只复制当前节点。

<html>
	<head>
		<title>00</title>
		<script type="text/javascript" charset="utf-8">
		
			function create(){
				var city=document.getElementById("city");
				var element=document.createElement("li");
				element.innerHTML="南京";
				//city.appendChild(element);
				//city.insertBefore(element,city.firstChild.nextSibling);
				city.replaceChild(element,city.lastChild.previousSibling);
			}
			
			function copy(){
				var city=document.getElementById("city");
				var element=city.firstChild.nextSibling.cloneNode(false);
				city.appendChild(element);
			}
			function deletetest(){
				var city=document.getElementById("city");
				var element=city.firstChild.nextSibling;
				city.removeChild(element);
			}
		
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<input type="button" value="创建复制替换节点" οnclick="create()"/>
		<input type="button" value="复制节点" οnclick="copy()"/>
		<input type="button" value="删除节点" οnclick="deletetest()"/>
	
	</body>

</html>