innerHTML,outerHTML,innerText,outerText

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);">

一个有信念者所开发出的力量,大于99个只有兴趣者。

innerHTML,outerHTML,innerText,outerText

相关文章:

你感兴趣的文章:

标签云: