Tampermonkey、Chromeテーブルに行を自動的に挿入する方法は？

Question

私は新しいテーブルのコードを挿入するという愚かな方法で試しましたが、うまくいかないようです。適切な方法は何でしょうか？ は、ここで私が何しようとしたものです：

var table = document.getElementsByClassName("test") 
[0].getElementsByClassName("tableclass"); 
for (var i = 0, l = table.length; i < l; i++) { 
    var content = table[i]; 
    let s = content.innerHTML; 
    s = s.replace(/table/g, 'table border="1"'); 
    s = s.replace(/tr>[\s\S]*?<tr>[\s\S]*?<td>3/g, 'tr>\r\n<tr>\r\n<td>3'); 
    content.innerHTML = s; 
} 

とフィドル：細胞のいくつかは、私が最終的に使用する場所のでhttps://jsfiddle.net/d10tk7nr/1/

はまた、私の愚かな方法は、テーブル全体が含まれていない理由は、これにはランダムなデータが含まれており、そのスキップ方法はわかりません。

Answer 1

新しいHTML要素を作成したい場合は、すべてのブラウザがそれをカバーします。ブラウザのコンソールでは、作成したまさにあなたが表示されます

var tr = document.createElement('tr'); 
console.log(tr); 

- まだDOMの一部ではない、新たなHTML要素：

<tr></tr> 

同じことがそのためのいくつかのコンテンツの作成に行きます表の行：

var td1 = document.createElement('td'), 
    td2 = document.createElement('td'); 
td1.innerText = '5'; 
td2.innerText = '6'; 
console.log(td1, td2); 

結果は、2つのTD-要素であろう。

<td>5</td> <td>6</td> 

ここでは、これらの部品を一緒に接着する必要があります。ブラウザはまた、あなたがこの上coverdています：

tr.append(td1); 
tr.append(td2); 
console.log(tr); 

結果は、完全なテーブルの行です：

<tr><td>5</td><td>6</td></tr> 

私たちがしなければならないのは、あなたのテーブルにこの行を追加します：

var table = document.querySelector('.test table tbody'); 
table.append(tr); 

あなたが作成した要素は、テーブルの本体のDOM - 子要素の一部になりました。

Click here for a fiddle

編集

あなたが特定の場所に新しい行を挿入したい場合は、その横になるとinsertBeforeを使用すべき要素あなたを見つける必要があります。あなたはどこのjavascript内に新しい行を置くことを選択したい場合は、ChildNodesプロパティを使用することができます

var targetTr = document.querySelector('.test table tr:nth-child(2)'); 
targetTr.parentNode.insertBefore(tr, targetTr); 

：これはへのコードの最後の部分を変更します

console.log(table.childNodes); 

Answer 2

私はそうのように、insertAdjacentHTMLを使用したい：

table[i].insertAdjacentHTML('beforeend', '<tr><td>5</td><td>6</td></tr>');

このフィドルを参照してください：https://jsfiddle.net/52axLsfn/4/

はまた、境界線を設定する方法を示します。このコードはすべてのテーブルを対象としているので、状況に応じてより具体的にすることをお勧めします。