jQuery trying to insert HTML of another div dynamically?

Question

This is really hard to explain. I have some divs with an id within a table

<table id="dgAvailable">
  <tr> <td> <div id="HEYD"> </td> </tr> <tr> <td> <div id="HANW"> </td> </tr> 
</table>

i need to fill those divs with this content

<div class="evenprop"><h3>Hanworth</h3><span class="locid" style="display:none">HANW</span></div>
<div class="evenprop"><h3>Heydon</h3><span class="locid" style="display:none">HEYD</span></div>

so i need to get the div which contains the locid with same id as my other div and then insert that html within the div in the table dgAvailable

$('#dgAvailable > tr > td > div').each(function(){
  if $(this).attr('id') = $('.evenprop > .locid').attr('id') {
  $(this).html() = $('.evenprop > .locid').parent().html()
});

I really have no other way of describing this?

Thanks

Jamie

Answer 1

Should do it.

$('.locid').each(function(){
   $('#'+$.trim($(this).text())).html(this.parentNode.cloneNode(true));
});

Answer 2

Try this:

$("div.evenprop .locid").each(function() {
   $("#" + this.innerHTML).html($(this).parent().clone());
});

You can try out a demo against your markup here.

---

If you have control over that other markup, you can clean it up a great deal by using a data attribute, like this:

<div class="evenprop" data-locid="HANW"><h3>Hanworth</h3></div>
<div class="evenprop" data-locid="HEYD"><h3>Heydon</h3></div>

Then your jQuery also gets a bit simpler, like this:

$("div.evenprop").each(function() {
   $("#" + $(this).attr('data-locid')).html($(this).clone());
});

Or if you don't need the old node and just want to move it, use .append(), like this:

$("div.evenprop").each(function() {
   $("#" + $(this).attr('data-locid')).append(this);
});