`

例证innerHtml,innerText,outterHtml,outterText

 
阅读更多 
<body>
    <div id=test>
        <table>
            <tr>
                <td>
                  	  Macrotea<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>
    <hr>
    <br>
    <div id="div">
        <input name="button" value="Button" type="text">
        <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);">
</body>

 

运行一下,可以感受效果!!

分享到：
| 进程间的通讯-无名管道例子
评论
1 楼 davos 2010-10-20  
我来给总结一下：
innerText与outerText的值是一样的，都是显示id里面的文本。
innerHtml不包括它自己本身这一层。
outerHtml包括它自己本身这一层。

说的不对的还请大家指正。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    innerHTML和innerText的区别

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

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

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

    js中innerHTML与innerText的用法与区别

    ### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中，经常需要用到JavaScript来操作DOM元素，其中`innerHTML`和`innerText`是非常重要的属性，它们分别用于获取或设置元素内部的HTML内容和纯文本...

    详谈innerHTML innerText的使用和区别

    详谈innerHTML innerText的使用和区别 在HTML文档中，获取或设置标签中的内容是非常重要的。document对象中有innerHTML、outerHTML、innerText和outerText四个属性，它们之间的区别和使用方法是开发者必须掌握的...

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

    在网页开发中，DOM（Document Object Model）操作是不可或缺的一部分，`innerHTML` 和 `innerText` 是两个常用的属性，用于处理HTML元素的内容。了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `...

    InnerHtml和InnerText的区别分析

    在编程领域，尤其是在Web开发中，常常会遇到与HTML元素操作相关的属性，其中`InnerHtml`和`InnerText`是两种常见的属性，它们在处理网页内容时有着不同的行为和用途。本文将深入探讨这两个属性的区别，并提供详尽的...

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

    特别需要注意的是，innerText只适用于IE浏览器，而innerHTML则是W3C标准属性，因此，在实际开发中，尽可能地使用innerHTML，而少用innerText。如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的...

    innerHTML-outerHTML-innerTEXT.txt

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

    关于在innerHTML中JS不执行的问题

    首先，我们需要理解`innerHTML`的工作原理。当设置一个元素的`innerHTML`时，浏览器会做以下几件事： 1. 清空当前元素的所有子节点。 2. 解析新设置的HTML字符串，生成一个DOM树。 3. 将新的DOM树插入到原始元素的...

    innerHtml（转）

    4. **与innerText的区别**：`innerText`属性与`innerHTML`相似，但它只返回或设置纯文本，不包含任何HTML标记。这意味着`innerText`在处理文本内容时更安全，但缺乏对HTML结构的控制。 5. **DOM操作的最佳实践**：...

    javascript中innerText和innerHTML属性用法实例分析

    在给出的实例代码中，我们可以通过不同的函数来测试和修改`innerText`和`innerHTML`的值。`TestOutput`函数分别使用`innerText`和`innerHTML`属性获取了元素的文本和HTML内容，并通过`alert`弹出。`EditInnerText`和...

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

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

    javascript innerText和innerHtml应用

    ### JavaScript中innerText与innerHTML的应用详解 在Web开发中，JavaScript是一种非常重要的客户端脚本语言，它可以帮助我们实现页面上的动态效果。在JavaScript中，`innerText`与`innerHTML`是两个非常常用的属性...

    inner-text:基于innerHTML的innerText函数，带有替换项

    内文基于innerHTML的跨浏览器innerText函数，带有替换项。 innerText是一个功能，不是标准化的，但支持Chrome和IE。 Firefox没有。 有多种方法可以实现innerText功能。 您可以获取一个选择window.getSelection() ，...

    js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

    本篇文章将深入讲解如何使用文档就绪函数以及`innerHTML`和`innerText`属性来实现动态内容的更新。 首先，我们要了解什么是文档就绪函数。在JavaScript中，通常使用`window.onload`或jQuery的`$(document).ready()`...

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

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

Magicbox
Global site tag (gtag.js) - Google Analytics