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