《DOM对文件的增删改操作》

最新推荐文章于 2021-02-21 07:18:13 发布

卡布奇诺奶茶的独特

最新推荐文章于 2021-02-21 07:18:13 发布

阅读量275

点赞数

分类专栏： Web小技能文章标签： web前端 html

本文链接：https://blog.csdn.net/qq_35119220/article/details/62220927

版权

Web小技能专栏收录该内容

12 篇文章 0 订阅

订阅专栏

概述：

此文件实现了DOM对UL(有序列表)内容的增加、删除、修改的操作，或许对您有所帮助.

代码详情：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="卡布奇诺奶茶的独特">
  <meta name="Keywords" content="增删改，DOM对文件的增删改操作">
  <meta name="Description" content="此文件实现了DOM对UL(有序列表)内容的增加、删除、修改的操作，或许对您有所帮助.">
  <title>DOM对文件的增删改操作</title>
 </head>

	<script type="text/javascript" language="javascript">
	
		//创建节点，默认在“上海”下方排序
		function create(){
			var city = document.getElementById("city");
			var element = document.createElement("li");
			element.innerHTML = "湖南";
			city.appendChild(element);
		}

		//在“北京”之前创建节点
		function create01(){
			var city = document.getElementById("city");
			var element = document.createElement("li");
			element.innerHTML = "新疆";
			city.insertBefore(element,city.firstChild.nextSibling);
		}
		
		//替换节点“北京”
		function replace(){
			var city = document.getElementById("city");
			var element = document.createElement("li");
			element.innerHTML = "齐齐哈尔";
			city.replaceChild(element,city.firstChild.nextSibling);
		}
		
		//复制节点“北京”
		function copy01(){
			var city = document.getElementById("city");
			var element = city.firstChild.nextSibling.cloneNode(true);
			city.appendChild(element);
		}

		/*上下两者[copy01、copy]之间有略有矛盾-_-*/

		//复制节点“上海”
		function copy(){
			var city = document.getElementById("city");
			var element = city.lastChild.previousSibling.cloneNode(true);
			city.appendChild(element);
		}

		//删除节点“上海”
		function del(){
			var  city = document.getElementById("city");
			var element = city.lastChild.previousSibling;
			city.removeChild(element);
		}
		

	</script>

 <body>
  
	<!--ele start-->
	<input type="button" value="创建节点" οnclick="create()"/>
	<input type="button" value="在第一个节点的上方创建新的节点" οnclick="create01()"/>
	<input type="button" value="替换“北京”节点" οnclick="replace()"/>
	<input type="button" value="复制“上海”节点" οnclick="copy()"/>
	<input type="button" value="复制“北京”节点" οnclick="copy01()"/>
	<input type="button" value="删除“上海”节点" οnclick="del()"/>
	<!--ele end-->
	<hr/>

	<ul id="city" style="list-style-type:circle;font-weight:bold;">
	
		<li>北京</li>
		<li>上海</li>
		
	</ul>

 </body>
</html>

Web截图：

-------------------------------------------------------------

吐舌头感谢您倾心的阅读

卡布奇诺奶茶的独特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《DOM对文件的增删改操作》

概述：此文件实现了DOM对UL(有序列表)内容的增加、删除、修改的操作，或许对您有所帮助.代码详情： DOM对文件的增删改操作 //创建节点，默认在“上海”下方排序 function create(){ var city = document.getElementById("city")
复制链接

扫一扫