2016-12-19 16 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.getElementsByClassName("testing"); 
 

 
      var children = all.childNodes; 
 

 

 
      for (var i = 0; i < elemWhichAppend.length; i++) { 
 
       
 
       var msgContainer = document.createDocumentFragment(); 
 
       var children = all.childNodes; 
 

 
       for (var child = 0; child < children.length; child++) { 
 
       
 
        var al = myLo(children[child]); 
 
        msgContainer.appendChild(al); 
 
       } 
 
       insertAfter(msgContainer, elemWhichAppend[i]); 
 
      } 
 
      
 

 

 

 
     } 
 
    } 
 
    return resultObject; 
 
} 
 

 
function insertAfter(newNode, referenceNode) { 
 
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
 
} 
 

 
function myLo(curElem) 
 
{ 
 

 
    var whichnodetype; 
 

 
    if (curElem.nodeType == 3) 
 
    { 
 
     whichnodetype = document.createTextNode(curElem.nodeValue); 
 
    } 
 
    else 
 
    { 
 
     var whichnodetype = document.createElement(curElem.nodeName); 
 
    } 
 

 
    var children = curElem.childNodes; 
 
    for (var child = 0; child < children.length; child++) { 
 
     whichnodetype.appendChild(children[child]); 
 
    } 
 

 
    return whichnodetype; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 
</head> 
 
<body> 
 
    <h1 class="testing">APPEND</h1> 
 
    <p>Hallo, ich bin ein P TAG </p> 
 
    <h2 class="testing">APPEND2</h2> 
 
    <input type="button" value="append tag/text " onclick="$('.testing').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße');" /> 
 
</body> 
 
</html>

мне удалось добавить каждый элемент первого тега, но во второй раз, это только добавляет последний тег. См. Код. Он идет два раза каждый цикл, который является правильным, но он по-прежнему добавляет неправильный второй раз.

+0

Если вы используете JQuery на всех, пожалуйста, нам это. Ваш код уменьшится до 30% или меньше и будет намного легче понять :) Кроме того, не используйте встроенные обработчики кликов с jQuery. Просто используйте делегированный обработчик, прикрепленный к не изменяющемуся элементу предка. –

+0

Через 5 минут я больше смущен, чем когда-либо. Кажется, вы дублируете базовые функции jQuery с помощью raw javascript. Не могли бы вы объяснить, какова общая цель, потому что я уверен, что вы можете сделать все это в нескольких строках jQuery :) –

+0

@GoneCoding Моя цель - передать тег/текст (элемент) моей функции добавления. Эти теги, которые я хочу добавить к моему селектору (класс, идентификатор или элементы) –

ответ

0

Я очень озадачен тем, как вы пошли об этом, и почему вы заменили append с вашей собственной версии, но в качестве примера того, как добавлять к нескольким целям с помощью JQuery в доли кода:

JSFiddle: https://jsfiddle.net/TrueBlueAussie/ad2qf4uy/

$('.addbutton').click(function(){ 
    $('.testing').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße'); 
}); 

Если бы вы могли объяснить, что ваша цель состояла в том, что бы сделать жизнь намного проще :)