Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
100yen

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!

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...