innerHTML、innerText和textContent设置获取值

最新推荐文章于 2022-10-06 21:19:46 发布

LLL_LH

最新推荐文章于 2022-10-06 21:19:46 发布

阅读量2k

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/79655130

版权

dom 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、innerHTML : 设置或返回元素之间的文本,包括元素标签

2、innerText : 设置或返回元素之间的文本内容,低版本火狐不支持

3、textContent : 设置或返回指定元素的文本内容,IE8之前不支持

<body>
		<div id="box">
			<p>hello world!<span>he is Tom.</span></p>
		</div>
		<script>
			window.οnlοad=function(){
				var box=document.getElementById("box");
				//获取值
				var str=box.innerHTML;  
				console.log(str);  //<p>hello world!<span>he is Tom.</span></p>
				var str2=box.innerText;  
				console.log(str2);  //hello world!he is Tom.
				var str3=box.textContent;    
				console.log(str3);   //hello world!he is Tom.
				var str4=getText(box);
				console.log(str4);   //hello world!he is Tom.方法获取值
				
				//设置值
				box.innerHTML="<div>设置innerHTML</div>";
				console.log(box.innerHTML);   //<div>设置innerHTML</div>
				box.innerText="设置innerText";
				console.log(box.innerText);   // 设置innerText
				box.textContent="设置textContent";
				console.log(box.textContent);   //设置textContent
				
				setText(box,'这是方法设置文本');
				console.log(getText(box));  //这是方法设置文本
			}
			//获取innerText和textContent兼容方法
			function getText(box){
				if(box.innerText){
					return box.innerText;
				}else{
					return box.textContent;
				}
			}
			//设置innerText和textContent兼容方法
			function setText(box,txt){
				if(box.innerText){
				 	box.innerText=txt;
				}else{
					box.textContent=txt;
				}
			}
		</script>
	</body>