There is a list of HTML elements with a common parent:

<div> <div>...</div> <div>...</div> <div>...</div> </div>

I get the following items using an AJAX request; they come as text:

 <div>...</div><div>...</div><div>...</div>

How best (and why) to add them to the end of the current list :

 <div> <div>...</div> <div>...</div> <div>...</div> <div>...</div><!-- Новый пункт --> <div>...</div><!-- Новый пункт --> <div>...</div><!-- Новый пункт --> </div>

1. Take the innerHTML parent (that is, the already existing clauses), add the result of the AJAX request to them and shove it all into the parent:

 parentOfItems.innerHTML = parentOfItems.innerHTML + responseText;

The first option seemed to work fine, but when I next used it on some project, where a bunch of some handlers were hung on the parent of the list, there were defects; so I began to look for alternative ways to implement this idea; from this, in fact, this question arose.

2. Create a lowercase ( span ) wrapper, put the result of an AJAX request into its innerHTML and add this wrapper to the parent:

 var wrapper = document.createElement('span'); wrapper.innerHTML = responseText; parentOfItems.appendChild( wrapper );

That is, the result will be the following:

 <div> <div>...</div> <div>...</div> <div>...</div> <span> <div>...</div><!-- Новый пункт --> <div>...</div><!-- Новый пункт --> <div>...</div><!-- Новый пункт --> </span> </div>

3. Create a temporary wrapper, put the result of the AJAX request into its innerHTML and add the children of this wrapper to the parent of the list items:

 var tmpWrapper = document.createElement('div'); tmpWrapper.innerHTML = responseText; for ( var i = 0; i < tmpWrapper.children.length; i++ ) { parentOfItems.appendChild( tmpWrapper.children[i] ); }

4. Another option has just occurred: use JSON; that is, convert the exhaust on the server to JSON, and on the client, unpack it and simply loop through the items, adding them to the parent. However, this option seems to me the most clumsy.

  • one
    What value is stored in response? Add an example - Grundy
  • Yes, show all the same, how exactly your data arrives. By the way: every time you use a carriage of divs, where, according to semantics, you need to use ul-li, one kitten dies in the world and one jQuery programmer is born. - Duck Learns to Hide
  • @Grundy, this is responseText - corrected the question. - Roman Grinyov
  • @ru_volt, you can and lists, there is no difference, then option 2 disappears. Well, everyone has their own tasks; for example, someone does not need semantics. - Roman Grinyov

2 answers 2

In this case, use the insertAdjacentHTML function .

 var responseText = '<div>NEW1</div><div>NEW2</div><div>NEW3</div>'; document.getElementById('d').insertAdjacentHTML('beforeend',responseText); 
 <div id="d"> <div>...</div> <div>...</div> <div>...</div> </div>

    In the first version, the main drawback is the re-creation of the elements that were previously present. From here all set of "delights" - event handlers fly off, tree nodes are invalidated, productivity decreases.

    The second option breaks the structure.

    The third option is devoid of the shortcomings of the first two: the markup is parsed only once, the old elements do not touch, the structure remains the same.

    The fourth option you in vain call "clumsy" - it, at a minimum, requires less network traffic. In addition, it allows data to be processed somehow, and not just pasted. But this option requires a normal client templating system, and they, in turn, usually drag entire frameworks with them. Keywords for Google: AngularJS, KnockoutJS, React.

    Well, the most correct option you called Grundy

    • About the third point I did not understand, appendChild will cut it myself and tmpWrapper, or was it not about that? rather not cut, and move - Grundy
    • @Grundy hmm, did not know ... - Pavel Mayorov
    • Yes, I agree with you about the fourth option - I was quick to draw conclusions. - Roman Grinyov