Внутренние HTML создают узлы в дереве DOM?

Question

Если я сделаю это:

document.getElementById("myDiv").innerHTML = "some_html_code";

это создаст узлы в моей DOM три, как если бы я использовал appendChild()?

Причина для того, чтобы спросить, что я создаю мобильное приложение, где использование памяти должно быть низким. Я не хочу создавать много узлов.

Answer 1

Это примерно так же, как

var div = document.getElementById("myDiv");

while( div.firstChild ) {
    div.removeChild( div.firstChild );
}

div.appendChild( document.createTextNode("a_html_string") );

Конечно, если по "html_string" Вы имеете в виду строку, состоящую из сложного html, тогда, конечно, из html создаются соответствующие узлы (узлы элементов, узлы комментариев, текстовые узлы и т. д.). Но простая строка текста - это просто один текстовый узел.

Так что, если ваша строка HTML была '<div id="hello">world</div>', это было бы примерно:

var div = document.getElementById("myDiv");

while( div.firstChild ) {
    div.removeChild( div.firstChild );
}

var anotherDiv = document.createElement("div");
anotherDiv.setAttribute("id", "hello");
anotherDiv.appendChild(document.createTextNode("world"));
div.appendChild(anotherDiv);

Вероятно, шокирует, как много всего происходит с простым невинным взглядом .innerHTML сеттер, и это даже не включая разбор HTML.

Важно отметить, что все это не мусор, все эти созданные объекты необходимы. Чтобы убедиться, что вы создаете только необходимые узлы, не используйте ненужные пробелы между узлами. Например

<span>hello</span> <span>world</span>

3 текстовых узла, но

<span>hello</span><span> world</span>

есть только 2 текстовых узла.

Давным- давно я создал шутливую jsfiddle, которая конвертирует html в "код DOM" для всех этих ненавистников.innerHTML.

Answer 2

Да, innerHTML будет проанализирован, и узлы будут созданы. Обойти это невозможно, DOM состоит из узлов.

Answer 3

Это создаст строку "a_html_string" и будет отображаться. но вы также можете добавлять элементы:

document.getElementById("myDiv").innerHTML = "<a> Link </a>"; // will be displayed "Link"