DOMを使用して.innerHTMLを使用せずにHTMLテーブルの値を設定する方法

Question

私は最近、私のコードは、私が受け取った答えではJavaScript

でオブジェクトの値がHTMLのテーブルを移入だろう、それは私が示唆されたコードレビュースタック所に

https://codereview.stackexchange.com/questions/8783/how-can-i-improve-performance-for-my-javascript-table-class

をいくつかのコードを投稿.innerHTMLまたはjQueryを使用せずにDOMを使用してテーブルに行を追加します。私はこれをやりたいと思っていますが、どうしたらいいのか分かりません。

私のコードは次のようになります。

var html = ... // code to get html 
$(tbody).html(html); 

がどのように私はinnerHTMLプロパティまたはjQueryのを使用せずに私のテーブル本体に変数​​htmlの行を取得することができます。

Answer 1

HTML文字列がある場合、Inerdialがコメント内でそれを指摘したように、あなた自身で解析する必要はありません。ブラウザがinnerHTML/jQueryで解析するようにします。私もプレーンなDOM操作を行う方法を紹介します

：

var thediv = document.createElement('DIV'); 

thediv.style.backgroundColor = 'white'; 
thediv.appendChild(document.createTextNode('some text')); 

document.getElementById('someElement').appendChild(thediv); 

基本だ。つまり、あなたは、テーブルとテーブルの行を作成し、その方法でそれらを挿入することができます。

jQueryまたはinnerHTMLを使用しない理由は別の質問です。

EDIT：あなたは、innerHTMLプロパティを使用する

var html = '<tr><td>This is a div</td></tr>'; 
$(tbody).html(html); 

：あなたがアプローチを使用する場合はしようとしているようだのdivに

おかげ

Answer 2

をいくつかのテキストを追加しました。これを回避するには、DOMの代わりにノードを作成する必要があります。

var cell = document.createElement('td'); 
var row = document.createElement('tr'); 
var tbody = document.getElementsByTagName('tbody')[0]; 

row.appendChild(cell); 
tbody.appendChild(row); 

はもちろん、これはtrに空tdを追加し、tbodyにそれを追加します。セル内にコンテンツを配置するには、あなたはまだinnerHTMLを使用する必要があるだろう：

var cell = document.createElement('td'); 
cell.innerHTML = "This is text inside of the created 'td' DOM node."; 
var row = document.createElement('tr'); 
var tbody = document.getElementsByTagName('tbody')[0]; 

row.appendChild(cell); 
tbody.appendChild(row); 

JS Fiddle demo。 jQueryのを使用して

、これはに凝縮することができます。

var cell = $('<td />').text("This is text inside of the created 'td' DOM node."); 
var row = $('<tr />'); 
var tbody = $('tbody:first'); 

row.append(cell).appendTo(tbody); 

JS Fiddle demo。

アプローチの比較へのリンク（ 'vanilla' jQueryに対するJavaScript）、at JS Perf。

Answer 3

私は、要素にテキスト文字列の内容を入れるときには.innerHTMLの代わりに.innerTextを使用していた可能性が高いと思います。それはもっと安全です。その理由は：何らかの形でコンテンツを取得した場合、 "<script> //do something bad </script>"のような文字列を取得すると、.innerHTMLを使用してDOMに追加されると、その危険なスクリプトが実行されることになります。しかし、.innerTextを使用すると、文字列としてDOMに配置され、実行するスクリプトとして評価されません。