实施例

Question

我将在JavaScript中创建一个XML元素来与服务器端交换数据。我发现我可以用document.createElement做到这一点。但我不知道如何将其转换为字符串。浏览器中是否有API使其更容易？或者是否有包含此API的JS库？

编辑：我发现浏览器API XMLSerializer，它应该是序列化为字符串的正确方法。

Answer 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标记）。

另见

Answer 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;
}

Answer 3

最简单的方法是将该元素的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;

那么简单：）

Answer 4

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

Answer 5

这可能不适用于每个人的情况，但是当从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>

Answer 6

我正在使用Angular，并且需要同样的东西，然后才登陆此职位。

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;

Answer 7

假设您的元素是整个[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);

如何将HTMLElement转换为字符串

7 个答案:

实施例

另见