Как использовать DOM для установки значений в таблице HTML без использования .innerHTML?

Question

Недавно я разместил некоторый код в Exchange Review Stack Exchange

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

Мой код будет заполнять таблицу HTML значениями из объекта в JavaScript

Получив ответ, было предложено использовать DOM для добавления строк в таблицу без использования .innerHTML или jQuery.Я хотел бы сделать это, но я не знаю, как.

Мой код выглядит так:

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

Как я могу получить строки в переменной html в мойТело таблицы без использования innerHTML или jQuery.

Answer 1

Я думаю, что, вероятно, было предложено использовать .innerText вместо .innerHTML при размещении содержимого текстовой строки в элементе (либо существующем, либо созданном на лету).Это просто безопаснее сделать.Причина в том, что если каким-то образом при извлечении содержимого вы получаете строку, содержащую что-то вроде «<script> //do something bad </script>», этот потенциально опасный сценарий будет выполняться при добавлении в DOM с использованием .innerHTML.Однако, если вы используете .innerText, он будет просто помещен в DOM в виде строки и не будет оцениваться как скрипт для запуска.

Answer 2

Похоже, что если вы используете подход, который вы пробуете:

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

Вы будете использовать innerHTML.Чтобы избежать этого, вам нужно вместо этого создать DOM-узлы:

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

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

Конечно, это добавит пустой td к tr и добавит его к 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 .

Ссылка на сравнение подходов («ванильный» JavaScript против jQuery), в JS Perf.

Answer 3

Если у вас есть 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 - это другой вопрос.

РЕДАКТИРОВАТЬ: добавил текст в div

Спасибо