JavaScript中，读取和修改节点对象

最新推荐文章于 2024-10-10 16:48:02 发布

原创最新推荐文章于 2024-10-10 16:48:02 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM节点的元素内容 #innerHTML

web-javascript 专栏收录该内容

93 篇文章

订阅专栏

本文介绍如何使用JavaScript操作DOM元素，包括读取和修改HTML内容及文本内容的方法。通过具体实例展示了getElementById方法结合innerHTML和innerText属性的应用。

读取和修改节点对象：

1，元素内容：

修改html的内容部分：

属性：innerHTML

使用方式：元素对象.innerHTML

var  msg = xx.innerHTML;//取值

xx.innerHTML = "";   //赋值,

2，文本内容

属性：textContent

作用：读取或设置html标记的文本内容，与html无关

注意：IE8显示有问题

解决方案：  属性：innerHTML

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<script>
		function getHtml(){
			var d1 = document.getElementById("d1");
			/*var msg = d1.innerHTML;
			console.log(msg);*/

			//设置 d1 的html内容
			d1.innerHTML = "<h1>你好,世界</h1>";
		}
		function getContent(){
			var d1 = document.getElementById("d1");
			/*var content = d1.textContent;
			console.log(content);*/

			//设置 d1 的文本内容
			d1.innerText = "<h1>你好,世界</h1>";
		}
	</script>
 </head>

 <body>
	<div id="d1">
		<h3>Hello World</h3>
	</div>  
	<button onclick="getHtml()"> 获取/修改 HTML内容</button>
	<button onclick="getContent()"> 获取/修改 文本内容</button>
 </body>
</html>

运行显示：