Не добавляет элементы к первому тегу
function $(selector) {
var resultObject = {
append: function (element) {
var parser = new DOMParser();
var dos = parser.parseFromString(element, "text/html");
var all = dos.getElementsByTagName("body")[0];
var elemWhichAppend = document.getElementsByTagName(selector);
var children = all.childNodes;
for (var i = elemWhichAppend.length-1; i >=0; i--) {
var msgContainer = document.createDocumentFragment();
var children = all.childNodes;
for (var child = 0; child < children.length; child++) {
var al = children[child];
msgContainer.appendChild(al);
}
insertAfter(msgContainer, elemWhichAppend[i]);
}
}
}
return resultObject;
}
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="jqueryjs.js"></script>
</head>
<body>
<h1 class="testing">APPEND</h1>
<p>Hallo, ich bin ein P TAG </p>
<h1 class="testing">APPEND2</h1>
<p>BADGL</p>
<input type="button" value="append tag/text " onclick="$('p').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße');" />
</body>
</html>Выполнить код отсекается. Как видите, функция добавляет только к последнему элементу p теги. И забывает о "беспорядке". Я много думал, но не могу найти свою ошибку. Это из-за того, что текст "Messi ist scheiße"?
4 ответа
Обертывание (messi ist scheiße) в тегах div, p или h1 поможет.
<input type="button" value="append tag/text " onclick="$('p').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> <p>messi ist scheiße</p>');" />
Вы сделали этот путь более сложным, чем нужно. Просто сделайте функцию append добавить вашу строку в innerHTML элемента.
function $(selector) {
var resultObject = {
append: function (element) {
var elemWhichAppend = document.getElementsByTagName(selector);
for (var i = elemWhichAppend.length-1; i >=0; i--) {
elemWhichAppend[i].innerHTML += element;
}
}
}
return resultObject;
}<h1 class="testing">APPEND</h1>
<p>Hallo, ich bin ein P TAG </p>
<h1 class="testing">APPEND2</h1>
<p>BADGL</p>
<input type="button" value="append tag/text " onclick="$('p').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße');" />Протестировав это немного в JS fiddle, я обнаружил, что когда вы перебираете дочерние элементы, по какой-то причине переменная, которую вы объявили как "все", кажется, исчезает или, по крайней мере, ухудшается по своей природе до такой степени, что не содержит любые дочерние элементы во втором цикле, и поэтому не проходит цикл Child-elements во второй раз.
Одна вещь, которая, казалось, улучшила производительность, была переопределением всех и душ в верхней части цикла:
for (var i = elemWhichAppend.length-1; i >=0; i--) {
var dos = parser.parseFromString(element, "text/html");
var all = dos.getElementsByTagName("body")[0];
var msgContainer = document.createDocumentFragment();
...
Это должно помочь, поскольку это определенно решило JSFiddle, на котором я был. Я не уверен, почему переменная 'all' меняется в природе точно, но она меняется - как я видел из журнала - как только вы выполняете эту строку:
msgContainer.appendChild(al);
Я предполагаю, что это происходит после того, как вы выполните эту строку, потому что эта строка фактически обращается к объекту document и вызывает его изменение (поскольку msgContainer является производным от объекта document).
Кроме того, вам, вероятно, придется включить 'messi ist Shiese' в HTML-тег, как строка
var dos = parser.parseFromString(element, "text/html");
Кажется, эта строка находит только элементы HTML в предоставленном вами элементе. Вы можете проверить это, попробовав console.log сам элемент 'child', и вы увидите, что когда вы включаете часть 'messi ist sheise' в тег, она появится, но не появится, когда ее нет тег.
for (var child = 0; child < children.length; child++) {
var al = children[child];
console.log(children[child]);
msgContainer.appendChild(al);
}