如何将 HTMLElement 转换为字符串
Posted
技术标签:
【中文标题】如何将 HTMLElement 转换为字符串【英文标题】：How to convert a HTMLElement to a string 【发布时间】：2011-01-29 07:08:13 【问题描述】：我将在 javascript 中创建一个 XML 元素来与服务器端交换数据。我发现我可以用document.createElement 做到这一点。但我不知道如何将其转换为字符串。浏览器中是否有任何 API 可以使其更容易？或者有没有包含这个API的JS库？
编辑：我发现浏览器API XMLSerializer，它应该是序列化为字符串的正确方法。
【问题讨论】：
Creating a new DOM element from an html string using built-in DOM methods or prototype 的可能重复项 【参考方案1】：元素outerHTML 属性（注意：supported by Firefox after version 11）返回整个元素的 HTML。
示例
<div id="new-element-1">Hello world.</div>
<script type="text/javascript"><!--
var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>
--></script>
同样，您可以使用 innerHTML 获取给定元素中包含的 HTML，或使用 innerText 获取元素中的文本（无 HTML 标记）。
另见
-
outerHTML - Javascript Property
Javascript Reference - Elements
【讨论】：
但似乎我无法使用属性outerHTML 获取内部文本。我想我真正想要的是 HTML 标记。 从 v11 开始，FF 支持outerHTML developer.mozilla.org/en-US/docs/Web/API/element.outerHTML 几乎所有现代浏览器都支持outerHTML：caniuse.com/#feat=mdn-api_element_outerhtml【参考方案2】：您可以通过克隆元素来获取“outer-html”， 将其添加到一个空的“后台”容器中， 并读取容器的 innerHTML。
本示例采用可选的第二个参数。
调用 document.getHTML(element, true) 以包含元素的后代。
document.getHTML= function(who, deep)
if(!who || !who.tagName) return '';
var txt, ax, el= document.createElement("div");
el.appendChild(who.cloneNode(false));
txt= el.innerHTML;
if(deep)
ax= txt.indexOf('>')+1;
txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
el= null;
return txt;
【讨论】：
也可以直接拨打domElement.outerHTML(w3schools.com/jsref/prop_html_outerhtml.asp)【参考方案3】：
有一个tagName 属性，还有一个attributes 属性：
var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++)
var attrib = element.attributes[i];
openTag += " "+attrib.name + "=" + attrib.value;
openTag += ">";
alert(openTag);
另见How to iterate through all attributes in an HTML element?（我做过！）
如果您不想遍历所有子元素，则可以使用innerHTML 来获取打开和关闭标签之间的内容...
alert(element.innerHTML);
... 然后用tagName 再次获取关闭标签。
var closeTag = "</"+element.tagName+">";
alert(closeTag);
【讨论】：
恐怕有时需要编写获取整个标记的代码。 如果它的 XML 应该都在一个根节点中，是吗？如果是这样，那么您只需对根节点执行此操作 - 所有主要浏览器都支持 innerHTML，并且会为您提供嵌套在根节点中的 X(H)TML。 （即一切！） 为什么要循环遍历元素的属性并从中构建字符串“标签”？只需将元素包装在另一个元素中，然后获取该新父元素的 innerHTML。瞧，outerHTML 的即时解决方法。【参考方案4】：假设您的元素是整个[object HTMLDocument]。您可以通过以下方式将其转换为 String：
const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;
const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]
const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;
console.log(doctype + html);【讨论】：
【参考方案5】：最简单的方法是将该元素的 innerHTML 复制到 tmp 变量并使其为空，然后附加新元素，然后将 tmp 变量复制回它。 这是我用来将 jquery 脚本添加到头顶的示例。
var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;
就这么简单:)
【讨论】：
【参考方案6】：这可能不适用于每个人的情况，但是从 xml 中提取时我遇到了这个问题，我用这个解决了。
function grab_xml(what)
var return_xml =null;
$.ajax(
type: "GET",
url: what,
success:function(xml)return_xml =xml;,
async: false
);
return(return_xml);
然后获取xml：
var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");
然后 然后，当我需要从包含 html 标签的 XML 文件中读取数据时，我制作了这个函数来提取 xml 行。
function extract_xml_line(who)
var tmp = document.createElement("div");
tmp.appendChild(who[0]);
var tmp=$(tmp.innerHTML).html();
return(tmp);
现在结束：
var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo <b>in bold</b>
【讨论】：
【参考方案7】：我正在使用 Angular，并且需要同样的东西，并登陆了这篇文章。
@ViewChild('myHTML', static: false) _html: ElementRef;
this._html.nativeElement;
【讨论】：
以上是关于如何将 HTMLElement 转换为字符串的主要内容，如果未能解决你的问题，请参考以下文章