Как правильно использовать innerHTML для создания элемента (с возможными дочерними элементами) из строки html?
Примечание: я делаюНЕ хочу использовать любой фреймворк.
Цель состоит в том, чтобы просто создать функцию, которая будет возвращать элемент на основе строки HTML.
Предположим, что простой HTML-документ выглядит так:
<html>
<head></head>
<body>
</body>
</html>
Все упомянутые функции включены в раздел head, и все создание / манипуляции с DOM выполняется в конце тела в теге script.
У меня есть функция createElement, которая принимает правильно сформированную строку HTML в качестве аргумента. Это выглядит так:
function createElement(str)
{
var div = document.createElement('div');
div.innerHTML = str;
return div.childNodes;
}
Теперь эта функция прекрасно работает, когда вы называете это так:
var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');
С незначительной (возможно ОГРОМНОЙ) проблемой, что созданный элемент не является «истинным» элементом, он все еще имеет parentNode «div». Если кто-нибудь знает, как это исправить, то это было бы здорово.
Теперь, если я вызову ту же функцию с более сложной строкой:
var e = createElement('<p id="myId" class="myClass">innerHTML<h2 id="h2ID" class="h2CLASS">Heading2</h2></p>');
Это создает ДВУХ детей вместо ОДНОГО ребенка с другим ребенком, имеющим другого ребенка.
Как только вы сделаете div.innerHTML = str. InnerHTML вместо
`<p id="myId" class="myClass">innerHTML <h2 id="h2ID" class="h2CLASS">Heading2</h2> </p>`
превращается в
`<p id="myId" class="myClass">innerHTML</p> <h2 id="h2ID" class="h2CLASS">Heading2</h2>`
<p.myClass#myId>,<h2.h2CLASS#h2ID>, и другой<p>]