`

Javascript中innerHTML与innerText的用法与区别

阅读更多

在JS中可以使用:

test.innerHTML:

<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>

特别说明:

   innerHTML 是符合W3C标准的属性,而 innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使 用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

 

 

 

innerHtml用法

<html>
<head>
<script>
function Test(){
         var str="";
         str+="Hello,";
         str+="This is a Test!<br />";
         str+="I Love you;<br />";
         str+="I Love you,too!";
         p.innerHTML=str+"<br /><br />"+Math.random();
         setTimeout('Test();',1000);
}
</script>
</head>
<body onload=Test();>
<span id="p"></span>
</doby>
</html>

innerTEXT与innerHTML的区别:
\"></span>
</span>
</p>
</div>
<div class=
http://news.sina.com.cn " onClick="return accessSina()">新浪新闻</a>


 

我们这里建立了两个函数,一个 accessNeteay,一个accessSina,就是访问网易和新浪,我们使用不同的方法,第一种就是当点了链接以后,判断如果是true的话,那 么就location到指定链接,这种方法比较不具有通用型,只能针对单个的链接。第二种方法是使用返回值的形式,当确定要访问的时候返回true,不确 定的时候返回false,那么这个可以针对任何链接来做,写成一个通用的信息提示,方便页面中的调用。

以上代码都经过测试通过,可以自己再这个基础上进行扩展,写出自己需要的JavaScript代码。

分享到:
评论

相关推荐

    js中innerHTML与innerText的用法与区别

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

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

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

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

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

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

    .innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型(DOM)中四个常用的属性,它们都是用来操作HTML元素的内容的,但它们之间有着很大的区别...

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

    总结来说,`innerText`和`innerHTML`是JavaScript中非常实用的属性,通过理解它们的作用和特性,开发者能够更加灵活地处理HTML文档内容。在使用时,选择合适的属性根据实际需要进行操作,是编写有效且安全JavaScript...

    innerHTML-outerHTML-innerTEXT.txt

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

    javascript innerHTML、outerHTML、innerText、outerText的区别

    JavaScript中的innerHTML、outerHTML、innerText和outerText是四个与HTML元素内容操作紧密相关的属性,它们在处理网页元素的文本和HTML结构时具有不同的作用和特点。 1. innerHTML: - innerHTML允许我们获取或...

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

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

    innerHtml(转)

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

    innerHtml用法精解

    #### 三、InnerText与InnerHTML的区别 `innerText`与`innerHTML`都是用来获取或设置元素的文本内容,但它们之间存在一些关键区别: - **innerText**:仅获取或设置纯文本内容,忽略所有HTML标签。 - **innerHTML**...

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

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

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

    innerText 和 innerHTML 是JavaScript中用于操作HTML元素内容的两个重要属性。它们允许开发者动态地修改网页上元素的文本或HTML结构。理解它们的区别和用法对于网页开发至关重要。 一、innerText 属性 innerText ...

    javascript textContent与innerText的异同分析

    在实际开发中,大多数情况下,`innerHTML`经过简单的处理就能提供与`innerText`相似的效果,对于大部分需求来说已经足够。但了解`textContent`和`innerText`之间的差异,可以帮助开发者更好地理解浏览器如何处理文本...

    JavaScript 50道面试题及答案.docx

    这些知识点涵盖了 JavaScript 中的基本数据类型、堆栈数据结构、变量声明提升、异步编程、事件流和事件冒泡、清除定时器、添加 DOM 对象到 body 中、innerHTML 和 innerText 区别、Window 对象等方面。

    JAVASCRIPT教案及案例

    5. 作用域:理解变量的作用域(全局和局部)是避免错误的关键,此外还有闭包这一重要概念,它是JavaScript中的一种高级特性。 二、DOM操作 1. DOM(Document Object Model)是HTML和XML文档的编程接口,JavaScript...

    javascript 经典实例大全四

    闭包则允许函数访问和修改外部作用域的变量,这是JavaScript中实现模块化和私有变量的关键。 三、DOM操作 在JavaScript中,Document Object Model (DOM) 是网页内容的结构化表示。通过DOM API,我们可以对网页元素...

    JAVASCRIPT程序设计基础教程课本案例代码

    例如,使用`document.getElementById`或`querySelector`获取元素,`innerHTML`或`innerText`改变元素内容,`appendChild`和`removeChild`调整元素位置。 事件处理是JavaScript与用户交互的关键。常见的事件如点击...

Global site tag (gtag.js) - Google Analytics