追加複数のテーブル行既存のテーブルに

Question

私のAJAX要求は、文字列形式で、以下のデータで応答：

<tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
<tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
<tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
<tr> <td>data</td> <td>data</td> <td>data</td> </tr> 

私は既存のテーブルに、このHTMLを追加します。

<table id="demo"> 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
</table> 

私はすでにDOMからテーブル要素を選択しました。

const table = document.getElementById('demo'); 

私は、次のような何かを行うことができるようにしたいが、もちろんappendChild方法を使用しては不可能であることでしょう。

table.appendChild(xhr.responseText); 

は、私が唯一のDOM（ライブラリを使用せず）を使用可能に達成するために働いている、そしてので、どのように私はそれを正しく使用して行くことができるかどうかは何ですか？

Answer 1

これはElement#insertAdjacentHTMLがために設計された、まさにです。これにより、既存のHTMLのすべてをパーサで再度送信するときにElement#innerHTMLの使用が無駄になることがなくなります。これは、大きなテーブルでは高価になり、既存の要素にバインドされているイベントリスナと既存の破壊されるDOMノード。

Element#innerHTMLの上に、このメソッドを使用することが常に一般的に安全です。ここで

は、あなたの質問に要求された結果を達成し、簡単な例である：ここでは

const rows = ` 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
`; 
 

 
const table = document.getElementById('demo'); 
 
table.insertAdjacentHTML('beforeend', rows);

<table id="demo"> 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
    <tr> <td>data</td> <td>data</td> <td>data</td> </tr> 
 
    <tr> <td colspan="3"><hr></td> </tr> 
 
</table>

は、各位置の挙動を示している例です。

const table = document.getElementById('demo'); 
 

 
const rows = data => ` 
 
    <tr> <td>${data}</td> <td>${data}</td> <td>${data}</td> </tr> 
 
    <tr> <td>${data}</td> <td>${data}</td> <td>${data}</td> </tr> 
 
`; 
 
/** <= ECMAScript 2015 
 
* function rows(data) { 
 
* return [ '<tr> <td>','</td> <td>','</td> <td>','</td> </tr>' + 
 
*   '<tr> <td>','</td> <td>','</td> <td>','</td> </tr>' ].join(data); 
 
* } 
 
**/ 
 

 
const insert = position => table.insertAdjacentHTML(position, rows(position)); 
 
/** <= ECMAScript 2015 
 
* function insert(position) { 
 
* return table.insertAdjacentHTML(position, rows(position)); 
 
* } 
 
**/ 
 

 
const positions = ['beforebegin', 'afterbegin', 'beforeend', 'afterend']; 
 

 
positions.forEach(insert);

<table id="demo"> 
 
    <tr> <td>existing data</td> <td>existing data</td> <td>existing data</td> </tr> 
 
    <tr> <td>existing data</td> <td>existing data</td> <td>existing data</td> </tr> 
 
</table>

Answer 2

あなただけinnerHTMLの末尾に追加することができます。

table.innerHTML += xhr.responseText; 

これは基本的に要素内のHTMLの最後にxhr.responseTextを追加します。

Answer 3

あなたはこれを試すことができます。

var ajaxData = `<tr> <td>data1-1</td><td>data1-2</td> </tr> 
 
<tr> <td>data2-1</td><td>data2-2</td> </tr> 
 
<tr> <td>data3-1</td><td>data3-2</td> </tr> 
 
<tr> <td>data4-1</td><td>data4-2</td> </tr>`; 
 

 
var table = document.getElementById('thatTable'); 
 

 
var template = document.createElement('template'); 
 
template.innerHTML = ajaxData; 
 
table.appendChild(template.content);

#thatTable td { 
 
    border: 1px solid black; 
 
}

<table id="thatTable"> 
 
    <tr> 
 
    <th>Head 1</th> 
 
    <th>Head 2</th> 
 
    </tr> 
 
</table>

は、私はあなたのAJAX呼び出しによって返されたHTMLを保持して、あなたのテーブルにテンプレートのコンテンツを追加するためのテンプレートを使用しています。あなたはすでに私の例のように、テーブル内のものを持っている場合には

私は、このようにそれを行います。