2016-07-16 7 views
1

私はtableとテーブルボディメソッドを見てきましたが、HTMLTableRowElementを挿入する方法については言及していません。誰でもテーブル本体にHTMLTableRowElementを挿入する良い方法を知っていますか?テーブル本体にHTMLTableRowElementを挿入する方法は?

const tbody = document.getElementsByTagName('tbody')[0]; 
// Only inserts an empty row 
// Want to insert a HTMLTableRowElement that I've parsed using jsdom 
tbody.insertRow(); 

EDIT:ガイダンス@frontend_devで jsdomは、ネイティブのDOM要素を使用していないように、それが見えます。解決策は以下のようなものに見えるかもしれだから:

let rows_rep = ''; 
jsdom.env(html_with_tr, function(err, w) { 
    rows_rep = w.document.getElementsByTagName('tr')[0].outerHTML; 
} 

const tbody = document.getElementsByTagName('tbody')[0]; 
const newRow = tbody.insertRow(); 
newRow.innerHTML = rows_rep; 
+1

あなたがレンダリング済みの '' DOM要素を持っているなら、なぜ単に 'appendChild'または' insertBefore'を使わないのでしょうか? –

+0

私はそれを試みましたが、 'パラメータ1はタイプ 'Node'ではないと言います。おそらくjsdomはネイティブDOM要素を使用していないでしょうか?より多くの文脈を与えるために、私は[jsdom](https://www.npmjs.com/package/jsdom)を使って別のページから要素を取得し、それらの要素を現在のページに注入しようとしています。 – Miles

+0

jsdomはわかりませんが、一見すると、ネイティブDOMではないようです。あなたが持っている唯一のオプションは、例えば、insertRow() –

答えて

0

追加したい行を含むHTML文字列を考えると、あなたはjsdomせずにその行を取得し、現在のドキュメント内のテーブルにそれを追加することができます

// Sample HTML string: 
 
var html = `<html> 
 
<body> 
 
    <h1>my title</h1> 
 
    <table><tr><td>dynamicly added row</td></tr></table> 
 
    <p>other text in here</p> 
 
</body> 
 
</html>`; 
 

 
// Create in-memory element and load HTML into it: 
 
var span = document.createElement('span'); 
 
span.innerHTML = html; 
 
// Get the row element out of it, and append it: 
 
var tr = span.querySelector('tr'); 
 
var tbody = document.querySelector('tbody'); 
 
tbody.appendChild(tr);
<table border=1> 
 
    <tr><td>existing row</td></tr> 
 
</table>

+0

ありがとうございました。あなたは正しいです。必要はありません。当初はBeautifulSoupに似たものを探していましたが、この方法ははるかにクリーンです。 – Miles

関連する問題