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变为：

>div<替换后>/div<

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