如何將HTMLElement轉換爲字符串

Question

我將在javascript中創建一個xml元素來與服務器端交換數據。我發現我可以用document.createElement.But做到這一點，但我不知道如何將其轉換爲字符串。瀏覽器中是否有任何API使它更容易？或者是否有任何js lib在醞釀這個API？

在此先感謝。

//修改

我發現瀏覽器API的XMLSerializer，它應該是序列化到字符串的正確途徑。

Answer 1

你可以得到 '外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

有一個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再次獲得close標籤。

var closeTag = "</"+element.tagName+">"; 
alert(closeTag); 

Answer 3

元件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獲得元素（SANS HTML標記）內的文本。

請參見

1. outerHTML - Javascript Property
2. Javascript Reference - Elements

Answer 4

這可能不適用於每個人的情況，但是當從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> 

Answer 5

最簡單的方法是，元素TMP變量，並使其爲空，則追加新元素的副本innerHTML的，那拷貝過來的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; 

這個簡單的:)