`
qingwenxiutong
  • 浏览: 19669 次
  • 性别: 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>





 

分享到:
评论

相关推荐

    通过改变innerHTML的内容,动态增加选择项

    在JavaScript编程中,`innerHTML`是一个非常重要的属性,它允许我们动态地修改HTML元素的内容,包括文本、HTML标记以及它们的组合。这个特性在构建交互式网页和动态更新页面内容时非常有用。本文将深入探讨如何通过...

    JS获取Table中td值的方法

    在前端开发中,JavaScript提供了多种方法来获取和操作HTML元素。特别是在表格(Table)中获取单元格(td)的值是一个常见的需求。本文将详细介绍如何使用JavaScript获取表格中td元素的值,并通过实例分析一些操作...

    在JavaScript中对HTML进行反转义详解_.docx

    在JavaScript中,HTML反转义是一个...总的来说,JavaScript中的HTML反转义是通过利用浏览器对HTML实体的解析能力来实现的,主要通过设置`innerHTML`属性来完成。在实际应用中,应谨慎处理反转义操作,以确保数据安全。

    js添加select下默认的option的value和text的方法

    标题所介绍的知识点是:在JavaScript中向HTML的select元素添加默认option项的方法,包括设置option的value值和显示文本(text)。 描述中提到的内容包括:JavaScript如何创建HTML标签、如何向select下添加默认...

    js实现省份城市联动

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和互联网应用开发。在前端开发中,实现省份城市联动是一项常见的需求,它可以让用户在选择省份时,自动更新下拉框中的城市选项,提供更加友好的...

    js中opener与parent的区别详细解析.docx

    ### JavaScript中的`opener`与`parent`的区别详解 #### 引言 在JavaScript中,`opener`和`parent`都是与浏览器窗口交互时常用到的属性。它们分别指向了不同的窗口对象,并且有着各自特定的应用场景。本文将详细介绍...

    按字母选择城市html+js代码

    在IT行业中,前端开发是构建Web应用程序的重要组成部分,而JavaScript(JS)和HTML则是这个领域中的基础语言。本文将深入探讨如何使用JavaScript和HTML来实现一个按字母选择城市的交互功能。 首先,HTML(HyperText...

    JS原生日期选择控件 js html javascript

    在JavaScript、HTML和CSS构建的Web应用中,创建一个原生的日期选择控件是常见的需求。这个控件允许用户方便地选取日期,通常用于填写表单或进行时间相关的交互。在给定的标题和描述中,我们可以推断出我们要讨论的是...

    下拉框的内容通过js插入到table中

    newCell.innerHTML = selectedOption.text; // 如果需要,可以设置其他属性或添加更多单元格 }; ``` 同时,如果需要删除表格中的行,我们可以使用`delRow`方法。假设我们有一个按钮触发删除操作: ```html ()...

    两个js弹出div层并获取当前页面值的html例子

    这可以通过JavaScript的DOM操作实现,例如`document.getElementById`或`querySelector`找到特定元素,然后用`.value`属性获取输入框的值,或者用`.innerHTML`获取元素内的文本内容。 下面是一个简单的例子: ```...

    IE6与IE7中,innerHTML获取param的区别

    因此,在IE6下,`innerHTML`返回的字符串会包含`&lt;param name=Filename value=text.mp3&gt;`这部分。 然而,IE7的行为有所不同。当在IE7中使用`innerHTML`获取`&lt;object&gt;`元素时,`&lt;param&gt;`标签被完全移除。这导致了在...

    js中动态加载div/input....

    "js中动态加载div/input"指的是使用JavaScript来动态地创建、修改或删除HTML元素,如div(div元素是网页布局中最常用的部分)和input(输入框,用于用户交互)。这种技术允许开发者在页面加载后或者根据用户的某些...

    JS特效.html

    JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页和网络应用开发,能够增强网站的交互性和动态效果。HTML(超文本标记语言)是网页内容的基础框架,而JavaScript与HTML结合,可以实现丰富的网页动态效果和...

    用js实现静态网页中文章列表页的分页功能

    ### 使用JavaScript实现静态网页中的文章列表分页功能 在现代Web开发中,为了提升用户体验以及优化服务器资源,分页是一项非常实用的技术。特别是在处理大量数据时,如文章列表、产品目录等,通过分页可以避免一次...

    js,下拉菜单

    在JavaScript(JS)中创建动态下拉菜单是前端开发中常见的任务之一,它能为用户提供交互性和便捷的操作体验。下面将详细介绍如何使用JS实现下拉菜单,并探讨与之相关的源码和工具。 首先,下拉菜单通常是HTML `...

    js实现动态修改table内容功能

    在JavaScript中,动态修改HTML表格(Table)的内容是一项常见的任务,尤其在网页交互和数据展示时。本篇文章将深入探讨如何使用JavaScript实现这一功能,包括选择表格元素、获取和设置单元格内容,以及监听事件来...

    javascript实现省市区三级联动

    在JavaScript编程中,实现省市区三级联动是一种常见的需求,尤其在构建动态网页和Web应用程序时。这个功能允许用户在选择省份后,市和区的选择会根据省份自动更新,提供更流畅的用户体验。以下是对这个主题的详细...

    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}} :{{...

    js技术中document对象技术汇总

    ### JavaScript中的Document对象技术汇总 在JavaScript编程语言中,`Document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并提供了多种方法和属性来操作网页内容。通过`Document`对象,开发者...

    js获取table行 列 的值

    HTML 中的 `&lt;table&gt;` 元素是用来显示表格数据的标准方式之一,而使用 JavaScript 来操作这些表格中的数据则非常常见。下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格(`&lt;table&gt;`)中的行(`&lt;tr&gt;`)和列(`...

Global site tag (gtag.js) - Google Analytics