Question

我知道innerHTML应该是icky（我们不要开始讨论。我们正试图在我的工作中逐步完成），但我需要能够得到一些HTML的纯文本版本。现在我有线......

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

但我想知道如何在没有innerHTML的情况下获得相同的结果。我并不害怕DOM操作（我已经完成了很多操作），所以请随意在你的答案中提供技术支持。

Answer 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...'

Answer 2

我想你想要这个：

someElement.textContent

Answer 3

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

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

<p id="my-id">Greetings Friends</p>

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

3 个答案: