`
shirlly
  • 浏览: 1651887 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

js中innerHTML,innerText,outerHTML的用法和区别

阅读更多
用法:

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

在JS中可以使用:

test.innerHTML:

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


  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

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

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


test.outerHTML:

  除了包含innerHTML的全部内容外, 还包含对象标签本身。

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>


完整示例:

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

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>


转自:http://www.cnblogs.com/zhc088/archive/2008/04/24/1169160.html
分享到:
评论

相关推荐

    innerHTML、outerHTML、innerText、outerText的用法与区别

    在示例中,我们可以看到,innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容,而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...

    html innerHTML outerHTML innerText outerText等的区别及实例汇总

    html js innerHTML outerHTML innerText outerText 等的区别及实例汇总

    innerHTML和innerText的区别

    在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...

    innerHTML-outerHTML-innerTEXT.txt

    根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...

    JavaScript中innerHTML,innerText,outerHTML的用法及区别

    在javascript中如果我们要获取对象内容,js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里,可能很多人不知道吧,接下来跟着小编一起来学习innerHTML,innerText,...

    详谈innerHTML innerText的使用和区别

    document对象中有innerHTML、outerHTML、innerText和outerText四个属性,它们之间的区别和使用方法是开发者必须掌握的知识。 首先,让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...

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

    在JavaScript中,`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性,用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...

    javascript innerHTML、outerHTML、innerText、outerText的区别

    JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性,它们各自有不同的功能和用途。 1. innerHTML: - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...

    innerHTML,outerHTML,innerTEXT三者之间的区别

    `innerHTML`、`outerHTML` 和 `innerText` 这三个属性是JavaScript中最常用的方法之一,它们分别用于获取或设置元素的HTML内容、整个元素(包括其所有子节点)的HTML代码,以及元素的纯文本内容。虽然这些方法在名称...

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `innerHTML` 属性允许我们获取或设置一个元素的HTML内容,包括所有的HTML标签。例如,在以下代码中: ```html &lt;span style="color:red"&gt;test1...

    innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解

    JavaScript中的innerHTML、outerHTML、textContent和innerText属性是处理HTML元素内容和文本的四个关键属性,它们各有特点,适用场景也有所不同。以下是对这些属性的详细解释: 1. innerHTML属性: innerHTML属性...

    innerText innerHTML的用法以及注意事项 [推荐]

    - 使用innerText和innerHTML时需要注意浏览器兼容性,innerText主要在IE中广泛支持,其他浏览器可能需要使用textContent。 - 对于大量HTML内容的修改,innerHTML更为合适;如果只是简单修改文本,innerText更简洁。 ...

Global site tag (gtag.js) - Google Analytics