javascript 中 innerHTML ineerText 怎么区别怎么用 求好的理解

Question

javascript 中 innerHTML ineerText 怎么区别怎么用 求好的理解

Answer 1

用法：
<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

参考资料：cjl

Answer 2

<p>this <b>is</b> a test<p>

取这个p的innerText结果是this is a test
而innerHTML结果是：this <b>is</b> a test

也就是innerText忽略html标签，而innerHTML则会包含html标签。

innerHTML一般用在动态构造html的时候。而innerText则一般用于像更新span等元素的内容时。

Answer 3

举个例子就知道了
<div id='test'><h1>Test</h1></div>

document.getElementById('test').innerHTML();
结果：<h1>Test</h1>

document.getElementById('test').innerText();
结果：Test

Answer 4

innerText 一般用来修改已个HTML元素中的值
innerHTML 一般用来插入html元素

Answer 5

源文件

<div id="div1">

</div>

<div id="div2">

</div>

<script type="text/javascript"> 

  document.getElementById('div1').innerHTML="<h3>hello~</h3>";

  document.getElementById('div2').innerText="<h3>hello~</h3>";

</script>

效果

hello~

<h3>hello~</h3>

附截图

Answer 6

最通俗的说：
innerHTML 是包括html标签的
innertext 是不包括html标签的
但innerHTML是符合 w3c 标准的
innertext只是支持IE