innerHTML、innertext、outerHTML的区别

最新推荐文章于 2022-04-15 22:15:21 发布

原创最新推荐文章于 2022-04-15 22:15:21 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

35 篇文章

订阅专栏

本文深入解析了HTML中innerHTML、innerText及outerHTML三个属性的区别，通过实例展示了它们如何处理HTML标签和文本内容，是前端开发者理解DOM操作不可或缺的指南。

innerHTML、innertext、outerHTML的区别

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
outerHTML指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。

<body>
		<div id="d1"><p id="p1">hello world </p></div>
		<script>
			var content = document.getElementById("d1");
			alert(content.innerHTML); //<p id="p1">hello world </p>
			alert(content.innerText); //hello world
			alert(content.outerHTML); //<div id="d1"><p id="p1">hello world </p></div>
		</script>
</body>