JS 创建节点，添加内容，删除节点

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

ZPD_zpd

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

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/110185030

版权

createElement() 方法

创建元素节点

appendChild() 方法

向节点的子节点列表的末尾添加新的子节点。

在这里插入图片描述

<body>
	<button type="button" id="btn">创建一个div</button>

	<script type="text/javascript">
		var btn = document.getElementById("btn");

		btn.onclick = function() {
			//创建一个节点
			var div = document.createElement("div");
			// 给节点添加属性
			div.style.border = "1px solid red";
			div.style.width = "200px";
			div.style.height = "100px";
			//查看是否创建
			console.log(div);

			//在<body>属性中追加一个节点
			document.body.appendChild(div);
		}
	</script>
</body>

setAttribute() 方法

创建或改变某个属性

element.setAttribute(attributename,attributevalue)

参数

attributename： String。必须，你要添加的属性名称。
attributevalue： String。必须，你要添加的属性值。

在这里插入图片描述

<body>
	<button type="button" id="btn">测试</button>
	<input type="text" name="" id="txt" value="测试" />

	<script type="text/javascript">
	    //获取页面元素
		var btn = document.getElementById("btn");
		var txt = document.getElementById("txt");
		
		// 点击事件
		btn.onclick = function() {
		    // 将文本框的属性更改为按钮
			txt.setAttribute("type", "button");
		}
	</script>
</body>

可以用来添加类名

element.setAttribut(“class”,“cl”);

但一般可以使用

element.classname=“cl”;

innerHTML 属性

用于设置文本或设置标签
在这里插入图片描述

<body>
	<button type="button" id="btn">测试</button>
	<div id="box"></div>

	<script type="text/javascript">
		// 获取页面元素
		var btn = document.getElementById("btn");
		var box = document.getElementById("box");

		btn.onclick = function() {
			// 向div内添加内容
			box.innerHTML = "text";
		}
	</script>
</body>

在这里插入图片描述

<body>
	<button type="button" id="btn">测试</button>
	<div id="box"></div>

	<script type="text/javascript">
		// 获取页面元素
		var btn = document.getElementById("btn");
		var box = document.getElementById("box");

		btn.onclick = function() {
			// 向div内添加内容
			box.innerHTML = "<h1>text</h1>";
		}
	</script>
</body>

ZPD_zpd

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 创建节点，添加内容，删除节点

<body> <button type="button" id="btn">创建一个div</button> <script type="text/javascript"> var btn = document.getElementById("btn"); btn.onclick = function() { //创建一个节点 var div = document.createElement("div"); div.inne
复制链接

扫一扫