innerText 与 innerHtml 都是打印标签之间的文本信息
1、innerText
打印标签之间的纯文本信息,会将标签过滤掉,低版本的火狐浏览器不支持,而是支持textContent
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <div id="box">
- <p>这是P标签</p>
- <p>这是P标签</p>
- <p>这是P标签</p>
- </div>
- </body>
-
- <script>
- var box = document.getElementById("box");
- //打印标签之间的纯文本信息,会将标签过滤掉
- var str = box.innerText;
- console.log(str);
- </script>
- </html>
打印结果是
2、innerHtml 打印标签之间的内容,包括标签和文本信息,各浏览器都支持,但是高版本的浏览器会原样打印
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <div id="box">
- <p>这是P标签</p>
- <p>这是P标签</p>
- <p>这是P标签</p>
- </div>
- </body>
-
- <script>
- var box = document.getElementById("box");
- //打印标签之间的内容,包括标签和文本信息
- var str = box.innerHTML;
- console.log(str);
- </script>
- </html>
打印结果是
- <p>这是P标签</p>
- <p>这是P标签</p>
- <p>这是P标签</p>
如果将div中的p标签不换行,打印的结果会原样输出
- <div id="box">
- <p>这是P标签</p>
- <p>这是P标签</p><p>这是P标签</p>
- </div>
打印结果是
- <p>这是P标签</p>
- <p>这是P标签</p><p>这是P标签</p>
但是使用innerText 会有兼容性,低版本的火狐浏览器不支持使用,而是支持使用textContent,因此我们需要封装一个兼容版本,以及调用方法
- <pre class="html" name="code">// 获取标签的对象
- var box = document.getElementById("box");
- // 调用方法
- var str = getText(box);
- console.log(str);
- /**
- * 封装了一个获取标签之间的文本信息兼容版本函数
- * @param element 标签对象
- * @returns {*}
- */
- function getText(element) {
- if(element.innerText) {
- return element.innerText; //IE8及之前的浏览器支持,现在两者都支持
- }else {
- return element.textContent; //低版本的火狐支持
- }
- }
|