javascript - javascript を使用して、生の html を新しいテーブル行として追加する方法はありますか?

Question

次のテーブルがあるとします。

<table>
  <tr id="1">...</tr>
  <tr id="2">..</tr>
  ...
  <tr id="last">..</tr>
</table>

また、生の htmlと、次のようなテーブル行を取得するサードパーティ サービスもあります。

<tr id="additional-1">...</tr>
<tr id="additional2">...</tr>

IDが「最後」のtrの後にこれらの新しい行を挿入する比較的単純なjavascriptの方法はありますか?

多くの解析、置換などを行う必要がないように、組み込みの簡単な方法を求めています。

jQuery ソリューションよりも YUI 3 の方が好きです。

Answer 1

table-Object をtable.innerHTML += trs格納し、追加の行を格納します。var tablevar trs

Answer 2

次のコードが機能するはずです

$("tr #last").after("ur raw html");

ただし、そのJquery。

Answer 3

で文字列を包みます<table><tbody>..rows here...</tbody></table>。次に、たとえば のようなダミー要素を作成し、プロパティを以前に構築された文字列に<div>設定します。innerHTML最後に、すべての行をループし、 を使用して行をテーブルに移動しますinsertBefore(newelem, reference)。このメソッドは、セルにプロパティを
設定するとエラーが発生する IE でも機能します。innerHTML

var raw_html, prev_element, last_element_parent, rows, i;
raw_html = '<tr>....etc....</tr>';
prev_element = document.getElementById('last_element');
last_element_parent = prev_element.parentNode;

dummy = document.createElement('div');
dummy.innerHTML = '<table><tbody>' + raw_html + '</tbody></table>';
rows = dummy.firstChild.rows;

for (i=rows.length-1; i>=0; i--) {
    last_element_parent.insertBefore(rows[i], prev_element.nextSibling);
}

Answer 4

YUI3では、次のことができます。

Y.one('#last').insert(rawHTML, 'after');