Вход

Просмотр полной версии : странное поведение .innerHTML()


greenwar
03.02.2021, 02:42
почему, если напечатать вот так:
var html_tbl = document.getElementById('small_tbl');
html_tbl.innerHTML += "<table>\n";
html_tbl.innerHTML += "<table2>\n";

alert(html_tbl.innerHTML);
то он выдаёт:
<table>
</table> <table2>
</table2>
ЧЯДНТ???

там <span id='small_tbl'></span>

awoll_n
03.02.2021, 02:49
html_tbl.innerHTML += "<table>";
html_tbl.innerHTML += "\n<table2>";
html_tbl.innerHTML += "\n<table3>";

voraa
03.02.2021, 07:11
Нормальное поведение.
Не понятно, что такое <table2>? Такого элемента не существует. Но это без разницы.
Происходит автозакрытие тегов.
У вас есть <span></span>.
Вы вставляете туда <table>, рассчитывая получить span><table></span>. Но сразу после вставки начинается парсинг этой строки. Парсер видит <table></span>. Такого быть не должно. Поэтому он сразу исправляет, закрывая тег, </table>. Иначе элементы правильно не построить.

greenwar
03.02.2021, 11:15
ок, но я там пытался вставлять в цикле <tr><td><div></div></td></tr>
а там вставляется только <div></div>
После <table></table>...
Спасибо тебе, умный парсер, что запорол программу... кто тебя просил??
Т.е. надо собирать таблицу в некую переменную, а только потом её .innerHTML(var)
и это единственный путь?

Aetae
03.02.2021, 11:53
Да, готовая переменная - это единственный путь, если работать со строками. И не только из-за парсера: a += b в javascript это полный аналог a = a + b, соответственно innerHTML += x полностью перезаписывает заново весь код(и заново парсит), так делать нельзя в принципе.

Надо помнить, что вы работаете не с текстом, а с уже готовой DOM структурой, текст парсится по мере прихода с сервера и уже не существует в живой странице. Методы типа innerHTML - это на самом деле костыль. Правильно же с DOM структурой работать через DOM методы: createElement, appendChild итд.

P.S. Есть метод document.write() который работает именно так, как вы ожидаете, но он работает только во время загрузки страницы, т.к. плюёт текст прямо в поток получаемого с сервера, до того как он будет распаршен. Соответственно после того как страница уже загрузилась - использовать его невозможно.

greenwar
03.02.2021, 12:09
да, точно, DOM
спасибо

greenwar
03.02.2021, 13:22
хотя вообще-то есть один нюанс...
там таки появляется <div></div>
а значит НЕ перезаписывает...

И ещё вопрос: почему <tr><td></td></tr> не вставил, потому что </table> уже был?

voraa
03.02.2021, 14:52
И ещё вопрос: почему <tr><td></td></tr> не вставил, потому что </table> уже был?

Именно поэтому. <tr> можно вставлять только в <table> и ее компоненты. <td> только в tr. А <div></div> вставится.

voraa
03.02.2021, 14:53
Спасибо тебе, умный парсер, что запорол программу... кто тебя просил??
Такую программу и запороть не жалко.