Javascript function 將 HTML 字符串解析成 DOM？

Question

有沒有好的 JS function 或 class 可以在不重置現有內容的情況下將 HTML 的字符串無縫解析到 DOM 中？ 我試圖找到一種簡單的方法來復制表格頂部的復雜表格行。

它顯然會像這樣工作：

element.innerHTML = newHTML + element.innerHTML;

但是，這會導致瀏覽器重新加載整個表格，從而重置滾動 position 並刪除表格中任何未保存的可編輯內容。

更新：

我沒有在這個項目中使用 jQuery。 這是我在某處找到的一個想法，但我無法讓它發揮作用：

var templateRow = document.getElementById( 'templateRow' );
var newhtml = "<tr id='row"+lastID+"'>"+'templateRow'.innerHTML+"</tr>";
var range = document.createRange();
range.selectNode( 'templateRow' );
var parsedHTML = range.createContextualFragment( newhtml );
templateRow.appendChild( parsedHTML )

Answer 1

您是否正在嘗試將內容插入現有元素，而不干擾已經存在的內容？

最直接的答案是insertAdjacentHTML 。 這是一個 IE 腳本擴展，由 HTML5 標准化：

mydiv.insertAdjacentHTML('afterBegin', '<p>Some new stuff</p><p>to prepend</p>');

不幸的是，它並沒有在任何地方實施。 因此，您必須在其他地方創建一個新元素，在其上設置innerHTML ，然后將內容傳輸到目標：

var container= document.createElement('div');
container.innerHTML= '<p>Some new stuff</p><p>to prepend</p>';
while (container.lastChild)
    mydiv.insertBefore(container.lastChild, mydiv.firstChild);

如果你有很多新內容，這會很慢。 您可以在支持 DOM Range 的瀏覽器上加速它，方法是在新內容上創建一個 Range，將其提取到 DocumentFragment 並將該片段插入到 go 中的目標節點中。

不幸的是（再次），無論您使用的是insertAdjacentHTML還是innerHTML ，IE<9 都不會設置 HTML 的元素：最值得注意的是<table>及其關系。 因此，在這種情況下，您必須將 HTML 包含在元素名稱的合適包裝器中：

container.innerHTML= '<table><tbody>'+newRowsHTML+'</tbody></table>';

然后從內部元素中提取內容以放入目標中。

這樣做的好處是，如果您有很多新行，您可以將表格放在一個<tbody>中，然后insertBefore / appendChild該主體將所有行放在一個 go 中，這比一個更快-一。

Answer 2

function parseHTML(html) {
    var el = document.createElement("div");
    el.innerHTML = html;

    return el.childNodes;
}

var nodes = parseHTML("<span>Text</span>");

Answer 3

^{免責聲明：這些天我不再使用 jQuery 編寫代碼。 很簡單，因為我討厭在這個瀏覽器上使用屬性 A 和在這個瀏覽器上使用屬性 B 之間的瀏覽器怪癖。 也就是說，這在 Firefox 中有效，但更多的是關於降低概念。 我只是想盡可能提前。}

演示

基本上，您執行以下操作：

1. 讓你的<table>包含所有你不想大驚小怪的“原始”/“未污染”數據。 ^[表格1]
2. 將一個包含您需要的附加數據的字符串插入到這個原始表中，而無需操縱（或以其他方式阻礙）table1 已經發生的任何事情。 ^{[樣本數據]}
3. 創建一個新的<table> ^[table2]並將其添加到文檔中（但將其設置為完全不可見）。 根據字符串的內容，您可以使用<div> ，但無論您使用哪種方法 go 它都應該是不可見的（畢竟，我們使用它的目的是能夠使用innerHTML解析 html 字符串）。
4. 現在獲取新<table> ^[table2] （或<div> ）的內容並使用 javascript 和 DOM 將這些項目推送到新表中。

這將避免在新表上再次使用innerHTML ，強制重新加載並丟失已經發生的任何事情。

Answer 4

使用例如 jQuery （具體方法的文檔 - 帶有示例 - 在這里）：

var your_html_code = '<table>...</table>';

然后像這樣使用它：

jQuery(your_html_code);

在 類似的問題頁面中查看更多信息。

Answer 5

我想我明白你想要做什么。 如果您需要一個可以讓您輕松解析 HTMl 的 .NET 庫，請嘗試Html 敏捷包

您可以解析 html 就像您使用 XMLDocument api in Z303CB0EF525D70C05721A8AAZ 解析 xml 一樣。 這是一個 .NET dll 所以你必須在粗略的服務器端執行此操作。 如果您需要在不回發的情況下操作 DOM，您始終可以在 web 服務器上創建一個服務，並進行包含 html 的 ajax 調用。

那有意義嗎？

Answer 6

innerHTML是通往 go 的方式。 也許您可以嘗試僅重置您正在更改的<td>的內部 HTML ，看看這是否會產生您想要的效果？

您還可以查看 DOM 中的表操作方法。

Answer 7

衷心感謝所有回復 - 其中一些非常詳細。 我已經設法使用 table.insertRow() 和 innerHTML 的組合解決了這個問題。 這似乎是解決問題的最快和最干凈的解決方案。 希望它和此頁面上的其他回復可以幫助其他人！

我們不是更新整個表 html，而是在 DOM 中添加一個新行並將 html 插入其中：

function $(id){ //just a shortcut function
    return document.getElementById(id);
}

var lastID = 10;  //id number of last table row

function addRow(){
    var newhtml = $('templateRow').innerHTML); //copy the template row
    var t = $('aTable').insertRow(2) //insert a row in the desired position
    t.id = 'row'+lastID; //update the new tr's id
    t.innerHTML = newhtml //replace the innerHTML of the new row
    lastID++; //increment the counter for next time
}

Answer 8

您是否研究過 J Query （如果您被允許使用它）？