innerHTML与textContent的定义
一个元素所包含的所有文本，以及它的所有子元素，被称为文本内容，当通过一个元素的文本内容属性访问时，文本中的空白在所有支持的浏览器中都会被减少。这个属性改变了一个元素内部的文本内容。与文本内容属性不同，inner HTML精确地返回元素内的所有内容，包括HTML。
innerHTML与textContent之间的头对头比较（信息图
下面是innerHTML与textContent之间的9大区别。
innerHTML与textContent的比较表
下表给出了内部HTML和文本内容之间的比较。让我们开始吧。
| S.NO | 文本内容 | 内部HTML |
| 定义 | 当对一个元素进行处理时，它返回一个文本，文本部分被元素包裹，同时忽略一个空格。一个好处是文本被选中并被复制到页面上（字符串化选择）。 | 内部HTML返回或设置文本部分和HTML标签，并考虑间距。他们以属性为特征来处理HTML的内部元素。 |
| 已开发 | InnerText是由微软引入的，它不是一个标准。 | 由微软引入。字符(&),(< ,>)作为HTML实体返回。 |
| 语法 | let el = document.getElementById('check');它返回 el.textContent | 它返回 el.innerHtml |
| CSS | 文本内容不是一个样式感知系统。 | 它返回嵌入在CSS元素中的文本。但这里并不只生成字符数据。它确实包括开头和结尾标签。 |
| HTML标签 | HTML标签不能被插入。它们与内部文本非常相似。另一方面，TextContent执行了一件奇怪的事情：它忽略了由br>和styled-as-block元素创建的换行。然而，标记中定义的空格会被保留下来。 | HTML标签可以被插入到脚本中。它们与文本内容并不相似。 |
| 代码的关键部分 | browser.DomElement("//div | browser.DomElement("//div |
| 优势 | 在这里，一个属性返回文本内容和它的后代，它精确地代表了文本内容在页面上出现的方式。这是JQuery中一个有用和需要的功能。 | 当向一个元素添加属性时，内部Html被认为是更干净的。 |
| 缺点 | 当返回文本时，它需要一些系统信息的布局，这降低了性能。需要昂贵的版面设计知识。 | 它容易受到跨网站的安全威胁。只有当数据来自可靠的源头时才会被使用。 |
| 例子 | 例子。
输出。 请登录会话 Tom Donald 欢迎来到本页面! | <p id="layout">输出：" <br > 请登录会话 <span> Tom Donlad <span/> 欢迎 来到页面！<br> " |
innerHTML与textContent的主要区别
1.元素的innerHTML属性获取或设置该元素的HTML内容。因为textContent元素不会自动对文本进行编码和解码，所以我们只能对元素的内容部分进行操作。
2. text content只是允许你把纯文本写成字符串，但innerHTML提供了一种直接和更简单的方法，可以把HTML模板创建成字符串并插入到DOM中。
3.尽管innerHTML在所有情况下都不是完全安全的，但在其他情况下它是有用的，比如在一个不捕捉用户输入的网站上添加静态数据。
4.文本内容在做改变时，会删除子节点。文本内容具有良好的性能，它的值不被解析。而且它可以防止XSS攻击。
5.文本内容与innerText不同，它不知道CSS的样式，不会引起回流。只有 HTMLElement 对象有 innerText，而所有 Node 对象有 textContent。
6.InnerHtml 在 Internet Explorer 中被支持，而 textContent 属性在 IE 中不被支持。
让我们从一些示例的 HTML 脚本开始，看看每个属性如何工作。
例子。
例子 #1
demo.html <!DOCTYPE html> <html> <body> <p id="click" onclick="myclick()">Place cursor on the Text.</p> <script> function myclick() { document.getElementById("click").textContent = "Changed Content!"; } </script> </body> </html>
解释
脚本说，点击短语，内容就变成了文本，输出显示为。
输出。
例子 #2
air.html
<!DOCTYPE html> <html> <body> <span id="exid">Airline <span style="display:none;">Ticket Reservation</span></span> <button onclick="reservation();">inner</button> <button onclick="cancel();">textContent</button> <script> function reservation() { var elt = document.getElementById("exid"); alert(elt.innerText); } function cancel() { var ele1 = document.getElementById("exid"); alert(ele1.textContent); } </script> </body> </html>
解释
上面的例子代码同时显示了innerHTML和text Content格式。因此，当一个按钮被提交时，页面会引导到显示文本内容的对话框。
输出。
点击内部按钮后
点击textContent按钮后
例子 #3
edu.html
<!DOCTYPE html> <html> <head> <title> HTML textContent Property Demo </title> </head> <body> <h1>This is EDUCBA</h1> <h2>Button Press for Text Content</h2> <button id = "edu" onclick = "Myeducba()"> Press </button> <p id = "exam"></p> <script> function Myeducba() { var tt = document.getElementById("edu").textContent; document.getElementById("exam").innerHTML = text; } </script> </body> </html>
解释
文本内容返回的是脚本中所有文本节点的串联文本，即剥离了标记标签。在上面的脚本中，当一个按钮被点击时，它显示的是HTML标签中的文本，而不是标记标签。因此，输出结果是这样的。
输出。
例子 #4
page.html
<html> <body> <p> Learning is a precious gift <strong>Is a lifelong process</strong>, and <em> boost mental ability</em> and a <a href="#">page</a>. </p> <p></p> </body> <script> const a1 = document.querySelectorAll("p")[0]; const a2 = document.querySelectorAll("p")[1]; a2. textContent = a1.textContent; </script> </html>
解释
我们可以看到，当我们执行上面的例子时，上面那段的格式已经从下面那段中删除了。这说明我们将无法使用textContent将文本替换成HTML。
输出。
结论
因此，在这篇文章中，我们已经学会了如何使用内部Html和文本内容的JavaScript属性来获得文本节点和Html元素及其后代。InnerHTML的用途更广，因为它允许有更多的创造性。如果用户只是想返回文本内容，那么textContent是最合适的方法。由于我们有更多的JavaScript属性，我们在上一篇文章中已经讨论过了，这取决于我们应该选择什么属性的情况。
推荐文章
这是一份关于innerHTML与textContent的指南。在这里，我们分别用信息图和对比表讨论了innerHTML与textContent的关键区别。You may also have a look at the following articles to learn more -
帖子innerHTML vs textContent首次出现在EDUCBA上。
