JavaScript и DOM: почему "<table>" + = "<tr><td></td></tr>" + = "

Question

В обоих случаях содержимое строки одинаково.Если вы делаете это:

 myDiv.innerHTML += "<table><tr><td>A</td><td>B</td></tr></table>";

Вы получаете таблицу с двумя столбцами.

Если вы делаете это:

 myDiv.innerHTML += "<table>";
 myDiv.innerHTML += "<tr>";
 myDiv.innerHTML += "<td>A</td>";
 myDiv.innerHTML += "<td>B</td>";
 myDiv.innerHTML += "</tr>";
 myDiv.innerHTML += "</table>";

Вы получаете только теги <table></table>,Никакой другой разметки нет.

Это потому, что JavaScript меняет смысл содержимого на объекты, тогда мы не добавляем TD в объект Table?Почему это так?

Answer 1

После каждого редактирования innerHTML браузер пытается создать полный набор объектов HTML DOM.

Итак, после первого шага у вас есть:

<table></table>

Поскольку добавлен конечный тегпутем восстановления после ошибки.

Затем вы пытаетесь

<table></table><tr>

И поскольку у вас не может быть строки таблицы вне таблицы, восстановление после ошибки отменяет ее.

…и т. д.

Answer 2

Не добавляйте в innerHTML снова и снова.Как вы ожидаете, что он сможет правильно анализировать элементы, если вы не добавите их в полной форме?Стоит ли просто догадываться?После каждого добавления он автоматически разрешает закрывающий тег, что приводит к дурацкому поведению.Я понимаю, что вы хотите построить свою строку таким образом для удобства чтения, так как насчет этого ...

var str = "";
str += "<table>";
str += "<tr>";
str += "<td>A</td>";
str += "<td>B</td>";
str += "</tr>";
str += "</table>";

myDiv.innerHTML += str;

Answer 3

Поскольку вы создаете элементы DOM каждый раз , когда вы устанавливаете innerHTML, вам необходимо создать полный (или, по крайней мере, действительный) набор элементов DOM, в настоящее время вы неоднократно добавляю незакрытые теги, что приведет к .... некоторому дурацкому поведению.

Результат вашего теста тоже не всегда <table></table>, он будет зависеть от того, как браузер будет обрабатывать недопустимую разметку ... но в большинстве случаев вы можете ожидать недопустимый результат.

Вот демонстрационная программа, иллюстрирующая, чем становится innerHTML при создании элементов DOM .