innertext outtext innerHtml outHtml

最新推荐文章于 2020-10-22 11:12:00 发布

quechao123

最新推荐文章于 2020-10-22 11:12:00 发布

阅读量1.6k

点赞数

文章标签： button input

本文详细解释了innerHTML和outerHTML属性的区别，innerHTML用于获取或设置元素内部的所有内容，而outerHTML则包括该元素本身及其所有子元素。同时，还介绍了innerText和outerText属性，并通过示例展示了这些属性在实际应用中的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerHTML,outerHTML innerHTML检索或设置标签内的内容；
outerHTML检索或设置整个标签的内容（包含标签）。

<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerText);" value="innerText">
<input type="button" onclick="alert(document.all.fieldset.outerText);" value="outerText">
</fieldset>

两个alert输出的结果分别是：
innerHTML：

<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">

outerHTML：

innerText,outText输出标签内部的文本信息
上面两个Text按扭输出同样的内容：
Original Text
但是注意的是，赋值时，outerText会连带标签一起替换成目标文本，innerText只替换原来的文本。

<fieldset id="fieldset" style="width:200;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
</fieldset>
<input type="button" onclick="oSpan.innerText='changed'" value="inner change">
<input type="button" onclick="oSpan.outerText='changed'" value="outer change">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">

点inner change后，点innerHTML输出结果为：
<SPAN ID="oSpan">changed</SPAN>
点outer change后，点innerHTML输出结果为：
changed