在不使用innerHTML的情况下获取innerHTML答案

【问题标题】：Get innerHTML without using innerHTML在不使用innerHTML的情况下获取innerHTML
【发布时间】：2011-09-23 16:00:38
【问题描述】：

我知道innerHTML 应该是 icky（我们不要开始辩论。我们正试图在我的工作中逐步淘汰它），但我需要能够获得一些 HTML 的纯文本版本。现在我有台词...

bodycontents = document.getElementById("renderzone").innerHTML;

但我想知道如果没有innerHTML，我将如何获得相同的结果。我不害怕 DOM 操作（我已经做了很多），所以请随意在你的回答中尽可能地技术性。

【问题讨论】：

{Groan} “我想走路，但不能用腿。请帮忙！”
我们不要开始辩论？为什么要开始辩论呢？您可以通过名为 innerHTML 的属性获得您想要做的事情。让我们将其归档在“第一世界问题”下
innerHTML 是获取对象的 HTML 内容的方法，请解释为什么您不想使用它。然后，我们可能会更好地了解您实际要解决的问题。
@user 为什么你不想使用innerHTML？你为什么要逐步淘汰它？对于为什么使用 innerHTML 不好，是否存在一些误解？在你回答之前，我认为处理这个问题毫无意义。就像 JohnFx 说的，这就像想走路但不想用腿。
@user 很公平 :) 虽然我感觉到 DailyWTF 正在这里制作。

标签： javascript html dom innerhtml

【解决方案1】：

在不使用element.innerHTML 属性的情况下检索元素内部 HTML 内容听起来像是一种学术追求，不太可能有简单的解决方案。

基于 DOM 的方法需要递归遍历来检索所有子节点并附加它们的文本内容并序列化元素名称和属性。例如（在 JavaScript/DOM 伪代码中）：

var getHtmlContent(el, str) {
  str += '<' + el.nodeName;
  foreach (attr in el.attribute) {
    str += attr.name + '="' + escapeAttrVal(attr.value) + '"';
  }
  str += '>';
  foreach (node in el.childNodes) {
    if (node.isTextNode()) {
      str += node.textContent;
    } else {
      str += getHtmlContent(node, str);
    }
  }
  str += '</' + el.nodeName + '>';
  return str;
}
getHtmlContent(myElement, ''); // '<div id="myElement" class="foo">Text<div...'

【讨论】：

【解决方案2】：

我想你想要这个：

someElement.textContent

【讨论】：

但是textContent的结果不等于innerHTML，是吗？
@Pekka "但我需要能够获得一些 HTML 的纯文本版本" - 据我了解，OP 想要的是文本内容，而不是 HTML 源代码...
这真的很重要吗...？我正在设置一个 CMS 电子邮件模板生成器。
@user 这很重要，因为有些应用程序可以使用innerHTML，而在其他应用程序中应该避免使用innerHTML 以支持其他技术。如果您不解释您的情况，我们将无法就您是否应该使用 innerHTML 向您提供建议。你能详细说明一下吗？（更新您的问题）

【解决方案3】：

在现代浏览器上，XMLSerializer 可能会对您有所帮助：

var el = document.getElementById('my-id');
var html_string = new XMLSerializer().serializeToString(el);
console.log(html_string);

&lt;p id="my-id"&gt;Greetings Friends&lt;/p&gt;

【讨论】：