2016-12-21 8 views
0

Не добавлять элементы к первой метке

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> 
 
\t <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». Я много думал, но я не могу найти свою ошибку. Это потому, что текст «messi ist scheiße» есть?

+1

Возможно, ваш код любит Месси и отказывается показать оскорбительный текст. – Teemu

+0

@Teemu Неплохая шутка ..... –

+0

Как сказал Анди, код слишком сложный, вы можете ознакомиться с 'insertAdjacentHTML', это может быть решением вашей проблемы. Создайте временный 'div', используйте' iAHTML() 'для создания элементов из строки в div, добавьте содержимое div в фрагмент документа и добавьте его к элементам. – Teemu

ответ

-1

Вы пропустили «» рядом getElementsByTagName

+0

Я не могу найти его? Где ты имеешь в виду? Мне нужно только «» для тела? –

+0

var elemWhichAppend = document.getElementsByTagName ("selector"); –

+0

var elemWhichAppend = document.getElementsByTagName ("selector"); таким образом он должен работать –

0

Вы сделали этот путь более сложный, чем это должно быть. Просто запустите функцию 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');" />

+0

Я сделал это раньше, но мой учитель сказал НЕТ innerHTML.Мы должны использовать insertAfter –

0

Обертывание (Messi IST Scheisse) в сНу, р или тега 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>');" /> 
+0

, но что делать, если пользователь хочет только добавить текст в HTML-документ? Не тег? –

+0

У вас есть место для ввода текста? – dtdesign

+0

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

0

На тестировании это немного JS скрипку, я обнаружил, что, как вы проходные дочерние элементы, по какой-то причине переменный, которую объявлена ​​как «все», кажется, dissappearing, или по крайней мере ухудшения в природе в той степени, в которой он не содержит дочерних элементов во втором цикле и поэтому не проходит цикл 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 я был на. Я не уверен, почему «все» переменная меняется в природе точно, но она меняется - как я видел из журнала - как только вы выполните эту строку:

msgContainer.appendChild(al); 

Я предполагаю, что это происходит после выполнения эта строка, потому что эта линия фактически обращается к объекту «document» и вызывает его изменение (поскольку msgContainer получен из объекта документа).

Кроме того, вы, вероятно, придется включать «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); 
} 
+0

, но что, если пользователь хочет только добавить текст в HTML-документ? Не тег? –

+0

Если пользователь хочет, чтобы вы подумали об альтернативе этой строке 'var dos = parser.parseFromString (element," text/html ");' - вам нужно искать и использовать метод парсера, который не требуют теги html. Кроме того, я бы сказал, что с точки зрения действительности HTML, если пользователь добавляет что-либо в документ HTML, он должен быть внутри тега HTML, иначе это недействительно HTML. Таким образом, либо пользователь вводит что-то в тег HTML, либо сам вручную помещает его в тег HTML через вашу кодировку. Я даже не думаю, что у парсера будет метод для анализа без html и преобразования его в html – Sabir

+0

. Вероятно, вы должны создать отдельную промежуточную функцию, которая принимает все входные данные пользователя, которые не находятся внутри тега HTML, и помещает его в P Тег, а затем добавьте это в переменную «element». – Sabir