如何将HTMLElement转换为字符串

Question

如何将HTMLElement转换为字符串

我将在javascript中创建一个xml元素来与服务器端交换数据.我发现我可以用document.createElement.But来做它我不知道如何将它转换为字符串.浏览器中是否有API使其更容易？或者是否有任何js lib包含这个API？

提前致谢.

//修改

我发现浏览器API XMLSerializer,它应该是序列化为字符串的正确方法.

Answer 1

gpm*_*dam 116

element outerHTML属性(注意:版本11之后的Firefox支持)返回整个元素的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>

Run Code Online (Sandbox Code Playgroud)

类似地,您可以使用innerHTML获取给定元素中包含的HTML,或者innerText获取元素内的文本(没有HTML标记).

也可以看看

FF中支持outerHTML,来自v11 https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML (3认同)

Answer 2

ken*_*bec 35

您可以通过克隆元素,将其添加到空的"offstage"容器并读取容器的innerHTML来获取'outer-html'.

此示例采用可选的第二个参数.

调用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;
}

Run Code Online (Sandbox Code Playgroud)

您也可以直接调用 `domElement.outerHTML` (https://www.w3schools.com/jsref/prop_html_outerhtml.asp) (4认同)

Answer 3

小智 6

假设您的元素是整个[object HTMLDocument]. 您可以通过以下方式将其转换为字符串：

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);

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，7 月前
查看次数：	135758 次
最近记录：	6 年，7 月前