Jump to content
Larry Ullman's Book Forums

How To Insert Group Of Html Nodes While Not Wipe Out The Existing Nodes

Recommended Posts

Hi,  here is another problem I would like to get a hint or some thought of it. 


I get a group a datas from ajax response that I would like to append them into existing product listing. 

// ajax response that I want to inside into the product listing page             
<div id="category_thumbnail">
             <a href="product_detail.php?pid=<?php echo $products['product_id'] ?>">
                 <img src="<?php echo $products['file_url_thumb'] ?>"><?php icon($products); ?></a>
             <p class="p_sku"><a href="product_detail.php?pid=<?php echo $products['product_id'] ?>">
                     <?php echo $products['product_sku'] ?></a></p>
             <p class="p_name"><?php echo $products['product_name'] ?></p>
             <p><a class="d_delete" href="remove_product_mailer.php?pid=<?php echo $products['product_id'] ?>"></a></p></div>

if do innerHTML, this group of data will be inserted but existing products data will be erased. If I use appendChild(), which doesn't work at all since this method only append single element. I checked W3C DOM guide and there is no a method similar to innerHTML but append the data instead of replace them.


I have been going so far and this is last feature I need to make it work, so please give me any suggestion to work around this problem. 


thanks a lot!



Link to comment
Share on other sites

You have several options:


1) Use innerHTML +=. Note that this will remove any event handlers attached to elements within the element you're using innerHTML on.


2) Use a document fragment (http://ejohn.org/blog/dom-documentfragments/). Note that you need to add a div or something to the document fragment before you can use innerHTML. In other words, you cannot use innerHTML on the document fragment object itself. Once you have the fragment the way you want it, you can use appendChild to add the whole fragment at once.


3) Add an extra div, etc. at the end of your markup so that you can use innerHTML on that div.


4) Add all the elements individually using appendChild, etc.


Those are your options. Each has its pros and cons, and you need to choose based on your situation.

  • Upvote 1
Link to comment
Share on other sites


  • Create New...