JavaScript文档对象模型document对象改变Html元素内容(3)

发布时间:2022-06-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript文档对象模型document对象改变Html元素内容(3)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.document对象改变Html元素内容

(1.)innerText不会自动解析html标签,会将代码前后的空格和换行去掉 innerHTMl会自动解析html标签,保留代码前后的空格和换行 (推荐使用这个) 这两个属性都可以改变html元素内容,会将标签原有的元素内容覆盖,而不是追加元素内容

(2.)除此之外innerText和InnerHtml两个属性不仅可以改变Html元素内容,还可以获取Html元素内容

JavaScript文档对象模型document对象改变Html元素内容(3)

案例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="one">111</div>
		<div class="two">222</div> <!-- innerText和innerHtml会覆盖html元素内容,而不是追加元素内容 -->
		<p>
			12312
			<span>2222</span>
			<a href="#">1</a>
		</p>
		<script>
			var obj1 = document.querySelector('.one'); //获取类名为one的第一个元素对象
			var obj2 = document.querySelector('.two'); //获取类名为two的第一个元素对象
			var obj3 = document.querySelector('p');//获取标签为p的第一个元素对象
			obj1.innerText = '<h2>123</h2>'; //innerText不会自动解析html标签
			obj2.innerHTML = '<h2>123</h2>'; //innerHTMl会自动解析html标签
			//使用innerText和innerHtml获取Html元素内容 
			console.log(obj3.innerText);
			console.log(obj3.innerHTML);
		</script>
	</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript文档对象模型document对象改变Html元素内容(3)全部内容,希望文章能够帮你解决JavaScript文档对象模型document对象改变Html元素内容(3)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: