`
qingwenxiutong
  • 浏览: 19258 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

js中innerHTML,textHTML,value的区别

阅读更多

innerHTML :属性设置或返回表格行的开始和结束标签之间的 HTML。

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

 

实例:

 

 

<html>

<head>

<script type="text/javascript">

function getInnerHTML()

  {

  alert(document.getElementById("tr1").innerHTML);

  }

</script>

</head>

<body>


<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />


</body>

</html>

 

 

弹出的结果是: <th>Firstname</th>

<th>Lastname</th>




value 属性可设置或返回密码域的默认值。

innerText:  从起始位置到终止位置的内容, 但它去除Html标签 

实例:
<div id="test">
   <span style="color:red">test1</span> test2
</div>

innerTest的值也就是“test1 test2”, 其中span标签去除了。

注意:在IE和火狐中,innerHTML是通用的 ,innerText、outText、outHTML只能在ie下使用。
也就是说,innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,


附加:outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text. outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>





 

分享到:
评论

相关推荐

    javascript函数的解释

    49.引用一个文件式的JS:&lt;script type="text/javascript" src="aaa.js"&gt; 50.指定在不支持脚本的浏览器显示的HTML:&lt;noscript&gt;&lt;/noscript&gt; 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例...

    artTemplate模板 js替换使用

    artTemplate模板 js替换使用 ### 编写模板 使用一个``type="text/html"``的``script``标签存放模板: &lt;script id="test" type="text/html"&gt; &lt;h1&gt;{{title}} {{each list as value i}} 索引 {{i + 1}} :{{...

    107个常用javascript语句

    49.引用一个文件式的JS:&lt;script type="text/javascript" src="aaa.js"&gt; 50.指定在不支持脚本的浏览器显示的HTML:&lt;noscript&gt;&lt;/noscript&gt; 51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例...

    网页播放器代码(javascript 播放器 控制)

    发表:不详 阅读: 37 次 关键字:不详 字体:[大 中 小] 详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp &lt;!DOCTYPE HTML PUBLIC "-//W3...

    js使用小技巧

    文本框的默认值 &lt;input type=text value="123" onfocus="alert(this.defaultValue)"&gt; title换行 obj.title = "123&#13sdfs&#32" 获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "/"))....

    JS分页效果JS分页效果

    &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; 懒人图库 http://www.makewing.com/" /&gt; 学会偷懒,并懒出境界是提高工作效率最有效的方法!" /&gt; 懒人图库" name="keywords" /&gt; 懒人图库 ...

    html样式编辑器源代码下载

    html编辑框源代码,简单易懂。可以直接套用 1.首先把两个js文件和相关图片加载进来。... document.getElementById("text").value=context;//把值付给一个普 通文本框,防止乱码,然后再Action类里取此文本框的值

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    谷歌翻译.html

    var text = document.getElementById("text").value; //要翻译成哪国语言 默认为中文 var toLanguage = document.getElementById("language").value; //调用google对象的检测要翻译的对象 arg1:要翻译的...

    超强JS(javascript)正则类第三版

    /* * JS正则表达式类 * 例: * var str="&lt;html&gt;&lt;script type='text/javascript'&gt;var a=10;&lt;/script&gt;&lt;body&gt;&lt;script type='text/javascript'&gt;var b=10;&lt;/script&gt;&lt;a href='javascript:;'/&gt;aaaa&lt; /a &gt;&lt;img ...

    Xpage学习笔记

    &lt;xp:handler type="text/javascript"&gt; &lt;xp:this.script&gt;&lt;![CDATA[ var numParts = Math.floor(100/7); jsProgress.update({ maximum: numParts, progress:0 }); for (var i=0; i; i++)...

    html_网页的简介

    a.innerHTML="Hello Word!"; a.style.color="blue"; } ()"&gt;按钮 &lt;/html&gt; &lt;html&gt; 我的第一段 JavaScript 请输入数字。如果输入值不是数字,浏览器会弹出提示框。 &lt;input id="d" type="text"&gt; function ...

    音乐有关的文件

    &lt;script type="text/javascript"&gt; var check=1; function flashPlayer(){ check++; if(check%2==0){ document.getElementById("flash").style.display="block"; document.getElementById("music...

    图库新版jQuery焦点图 JS代码

    var ojs='&lt;script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"&gt;&lt;/script&gt;'; if (code=="top210x90_1"){ document.write('&lt;script type="text/javascript" &gt;BAIDU_CLB_SLOT_ID = "288992";&lt;/script&gt;...

    javascript倒计时

    document.getElementById('thetime').innerHTML = timeValue; timerID = setTimeout("showtime()",500); timerRunning = true; } &lt;SCRIPT Language="JavaScript"&gt; secs = 59; // Number of secs to delay -...

    asp+ajax静态分页

    &lt;input type="text" id="pagesize" size="3"&gt; 条 &lt;input type="button" id="savebtn" value="保存" onclick="save()"&gt; &lt;input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"&gt;&lt;/form&gt;' //定义...

    三级联动Ajax菜单(包含省市数据)

    &lt;script type="text/javascript"&gt; var xmlHttp; var requestType=""; function createXMLHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window....

    多文件上传

    &lt;script type="text/javascript"&gt; function addFile(){ var myTB = document.getElementByIdx_x_x("myTB"); var rowNum = myTB.rows.length; var newRow = myTB.insertRow(rowNum); var cells_0 = newRow....

    JavaScript Table行定位效果

    上面用到了parentNode,这里顺便说说它跟offsetParent,parentElement的区别。 先看看parentNode在w3c的说明: The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a ...

Global site tag (gtag.js) - Google Analytics