我们在用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">>div<替换后>/div<</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标签，将会作为特殊字符做替换处理。