innerHTML、outerHTML、innerText的用法和特点

<div id="box">
<div>
<div>55</div>
</div>
</div>
下面说下innerHTML，outerHTML，innerText的用法：

如下的js代码：
如果用innerHTML的话！
<script>
var box = document.getElementById("box");
alert(box.innerHTML)
</script>

就会弹出
<div>
<div>55</div>
</div>

如果用outerHTML的话！
<script>
var box = document.getElementById("box");
alert(box.outerHTML)
</script>

就会弹出
<div id="box">
<div>
<div>55</div>
</div>
</div>

如果用innerText的话！
<script>
var box = document.getElementById("box");
alert(box.innerText)
</script>

就会弹出
55

这样就很清楚的看出了这三个的用法和特点：
innerHTML会选中除了id="box"以外的所有里面的节点和元素；
outerHTML会选中连带本身的所有的节点和元素；
innerText会选中元素里面的内容。

<script>
var box = document.getElementById("box");
box.innerHTML = "<b>" + 5 + "</b>";
</script>
代表将id="box"里面的所有元素替换成<b>5</b>,所以执行完上面的js代
码之后，html中是这样的：
<div id="box">
<b>5</b>
</div>

打开网页会显示一个加粗的5；

<script>
var box = document.getElementById("box");
box.outerHTML = "<b>" + 5 + "</b>";
</script>
代表将id="box"本身及里面的所有元素替换成<b>5</b>

打开网页同样是会显示一个加粗的5；但现在执行完上面的js代码之后，
html中是这样的：
<b>5</b>

<script>
var box = document.getElementById("box");
box.innerText = "<b>" + 5 + "</b>";
</script>
代表将id="box"里面的所有元素替换成<b>5</b>

打开网页同样是会显示<b>5</b>；因为执行完上面的js代码之后，html中
是这样的：
<div id="box">
<b>5</b>
</div>
注意此时的<b>5</b>不是作为一个标签存在的，它是作为id="box"标签中
的文本内容出现的！！！

转载于:https://www.cnblogs.com/hr2014/p/3642350.html