首页 > 开发 > 综合 > 正文

innerHTML,outerHTML,innerText,outerText

2020-09-19 11:15:03
字体:
来源:转载
供稿:网友
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:
<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">
</fieldset>


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

自己用代码来体会一下
html 代码片段如下:
<div id=test><table><tr><td>文本<a>链接</a>另一段文本</td></tr></table></div>
<input type=button onclick=alert(test.innertext) value="show innertext"><br>
<input type=button onclick=alert(test.innerhtml) value="show innerhtml"><br>
<input type=button onclick=alert(test.outerhtml) value="show outerhtml"><br>


<div id="div"><input name="button" value="button" type="button"><font color="green"><h2>this is a div!</h2></font></div>
<input name="innerhtml" value="innerhtml" type="button" onclick="alert(div.innerhtml);">
<input name="outerhtml" value="outerhtml" type="button" onclick="alert(div.outerhtml);">
<input name="innertext" value="innertext" type="button" onclick="alert(div.innertext);">
<input name="outertext" value="outertext" type="button" onclick="alert(div.outertext);">
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表