Как правильно использовать innerHTML для создания элемента (с возможными дочерними элементами) из строки html?
Примечание: Я НЕ хочу использовать какой-либо фреймворк.
Цель состоит в том, чтобы просто создать функцию, которая будет возвращать элемент на основе строки HTML.
Предположим, что простой HTML-документ, подобный такому:
<html>
<head></head>
<body>
</body>
</html>
Все упомянутые функции включены в раздел заголовка, и все создание / управление DOM выполняется в конце тела в теге скрипта.
У меня есть функция 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>`
Вопросы:
- Могу ли я каким-то образом получить элемент без родительского узла после использования .innerHTML?
- Могу ли я (в случае немного сложной строки) получить свою функцию чтобы вернуть ОДИН элемент с соответствующим потомком вместо двух элементов. [На самом деле он возвращает три: