innerhtml,outerhtml innerhtml檢索或設(shè)置標簽內(nèi)的內(nèi)容;
outerhtml檢索或設(shè)置整個標簽的內(nèi)容(包含標簽)。
<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輸出的結(jié)果分別是:
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輸出標簽內(nèi)部的文本信息
上面兩個text按扭輸出同樣的內(nèi)容:
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輸出結(jié)果為:
<span id="ospan">changed</span>
點outer change后,點innerhtml輸出結(jié)果為:
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);">