JavaScript DOM 基本操作：appendChild() & removeChild()&getElementsByTagName(“p“)

6-Tong

于 2021-12-17 01:28:46 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： safari javascript 蓝桥杯

本文链接：https://blog.csdn.net/weixin_45852947/article/details/121987613

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
	<body>
		<h1>用DOM 增加一个 paragraph</h1>
		<div id="demo">

			<p id="p1">this is the paragraph to be removed</p>
			<button onclick="myFunction()" id="button">remove</button>
		</div>
		<script>
			var p = document.createElement("p");
			var node = document.createTextNode("hello");
			p.appendChild(node);
			document.getElementById("demo").appendChild(p);
		</script>

		<h1>用DOM 移除一个 paragraph</h1>
		<script>
			function myFunction() {
				document.getElementById("demo").removeChild(document.getElementById("p1"));
				
			}
		</script>
		
		
		<div id="demo2"></div>
		<h2>Summary:</h2>
		<p>
			1. 增加删除 主要使用的方法为 appendChild() & removeChild()<br>
			2. 给 paragraph 增加一段文字，需要把文字当成一个node 使用 createTextNode<br>
			3. 增加paragraph 使用 createElement<br>
		</p>
		
		<script>
			document.write(document.getElementById("demo").getElementsByTagName("p").length);//看一共有几个p
			//注意细节： getElement s 
		</script>

	</body>
</html>

6-Tong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 基本操作：appendChild() & removeChild()&getElementsByTagName(“p“)

<html> <body> <h1>用DOM 增加一个 paragraph</h1> <div id="demo"> <p id="p1">this is the paragraph to be removed</p> <button onclick="myFunction()" id="button">remove</button> </div> &lt.
复制链接

扫一扫

专栏目录