【javaweb】利用DOM操作往DIV块中添加文本

需求:利用DOM操作往DIV块中自动添加文本

使用的DOM操作如下:

(1)createTextNode() 创建文本节点

(2)createElement() 创建元素节点

(3)appendchild(node) 插入新节点

分析:

 代码实现:

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script >
			function init(){
				var div=document.getElementById("div1");
				//创建元素节点<p></p>
				var p=document.createElement("p");
				//创建文本节点
				var textNode=document.createTextNode("我是内容!")
				//将文本内容和P标签进行连接
				p.appendChild(textNode);
				//将P标签和div块进行连接
				div.appendChild(p);
			}
		</script>
	</head>
	<body>
		<input type="button" value="点我添加内容" onclick="init()" />
		<div id="div1"></div>
	</body>
</html>

内容示例:

猜你喜欢

转载自blog.csdn.net/qq_42370146/article/details/84326604