innerHTML、innerText、outerHTML、outerText的区别

我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容

<script>
//JS
document.getElementById('test').innerHTML="设置元素内容";
//JQ
$("#test").val("设置元素内容");
</script>

但是如果我们需要获取包含元素本身的内容的时候就会变得很麻烦,这时候用outerHTML便可以轻松解决问题了。

原HTML为:

<div id="test"><span>替换前</span></div>

1、innerHTML

运行脚本

<script type="text/javascript" lang="javascript">
//JS
document.getElementById('test').innerHTML = "<div>替换后</div>";
//JQ
$("#test").val("<div>替换后</div>");
//或者
$("#test").prop("innerHTML ","<div>替换后</div>");
</script>

原HTML变为:

<div id="test"><div>替换后</div></div>

2、innerText

运行脚本

<script type="text/javascript" lang="javascript">
//JS
document.getElementById('test').innerText= "<div>替换后</div>";
//JQ
$("#test").text("<div>替换后</div>");
//或者
$("#test").prop("innerText","<div>替换后</div>");
</script>

原HTML变为:

<div id="test">&gt;div&lt;替换后&gt;/div&lt;</div>

3、outerHTML

运行脚本

<script type="text/javascript" lang="javascript">
//JS
document.getElementById('test').outerHTML = "<div>替换后</div>";
//JQ
$("#test").prop("outerHTML","<div>替换后</div>");
</script>

原HTML变为:

<div>替换后</div>

4、outerText

运行脚本

<script type="text/javascript" lang="javascript">
//JS
document.getElementById('test').outerText= "<div>替换后</div>";
//JQ
$("#test").prop("outerText","<div>替换后</div>");
</script>

原HTML变为:

&gt;div&lt;替换后&gt;/div&lt;

innerHTML和outHTML都是会将HTML标签一起读取或设置,但innerText和outerText在读取的时候会去掉HTML标签,设置的时候如果字符中包含HTML标签,将会作为特殊字符做替换处理。

上一篇:JetBrain(Pycharm,Clion...)的使用优化


下一篇:js判断是否为pc端或移动端