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

时间: 2024-09-24 09:00:19

innerHTML,outerHTML,innerText,outerText的相关文章

innerHTML,outerHTML,innerText,outerText的用法及区别解析_javascript技巧

<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div> <input name="innerHTML" value="innerHTML" type="button" OnClick="

innerHTML,outerHTML,innerTEXT三者之间的区别_javascript技巧

与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:

js中innerHTML与innerText的用法与区别

s中innerHTML与innerText的用法与区别 用法: Java代码   <div id="test">      <span style="color:red">test1</span> test2   </div>   在JS中可以使用: Java代码   test.innerHTML:   也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是&qu

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

一.前言   由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否 就能完全等同呢?在坑爹的表单元素(如input.textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏.   二.innerHTML   由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点.   赋值操作:先对值内容进行模式匹

Javascript中outerHTML、innerHTML和innerText区别详解

示例代码:  代码如下 复制代码 <div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中可以使用:  代码如下 复制代码  document.getElementById('test').innerHTML: 也就是从test对象的起始位置到终止位置的全部内容,包括其内部的Html标签. 上例中的返回值:<span style=

js中outerHTML innerHTML与innerText区别与用法

下面我们一个实例验证一下 --> <div id="test111cn_net">    <span style="color:red">这里是测试内容</span> test2 </div> outerhtml <a href="网页特效:alert(test111cn_net.outerhtml)">获取outerhtml内容</a> 输出值: innerhtml

innerhtml用法 innertext用法 以及innerHTML与innertext的区别_javascript技巧

test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了. te

InnerHtml和InnerText的区别分析_基础知识

最详细的解答可以参见MSDN InnerTexthttp://msdn.microsoft.com/zh-cn/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innertext.aspx InnerHtmlhttp://msdn.microsoft.com/zh-cn/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innerhtml.aspx 简要解释: Inner

学习Javascript教程:JS面试题(有答案)

文章简介:一套完整的javascript面试题.  一.单选题 1.以下哪条语句会产生运行错误:(a,d) A.var obj = ();    B.var obj = [];   C.var obj = {};       D.var obj = //; 2.以下哪个单词不属于javascript保留字:(b) A.with       B.parent       C.class             D.void  3.请选择结果为真的表达式:(b 改为 C) A.null instan