如何将一个HTMLElement转换为一个string

我将在javascript中创build一个xml元素来与服务器端交换数据。 我发现我可以做到这一点与document.createElement.But我不知道如何将其转换为string。 浏览器中是否有任何API来使它更容易？ 还是有任何js lib在这API的？

提前致谢。

//修改

我发现浏览器API XMLSerializer，它应该是正确的方式来序列化为string。

Answer 1

你可以通过克隆这个元素来获得'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 2

元素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> 

类似地，你可以使用innerHTML来获取给定元素中包含的HTML，或者使用innerText来获取元素中的文本（不含HTML标记）。

也可以看看

1. outerHTML – Javascript属性
2. Javascript参考 – 元素

Answer 3

最简单的方法是将该元素的innerHTML复制到tmpvariables并将其变为空，然后追加新元素，然后将tmpvariables复制回它。 这里是我用来将jquery脚本添加到顶部的示例。

 var imported = document.createElement('script'); imported.src = '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); 

另请参见如何迭代HTML元素中的所有属性？ （我做到了！）

要获取开放和closures标签之间的内容，如果您不想迭代所有子元素，可以使用innerHTML …

 alert(element.innerHTML); 

…然后用tagName再次获得closures标签。

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

然后，我做了这个函数来提取XML线，当我需要从一个XML文件，包含HTML标签读取。

  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>