JQuery trying to insert HTML of another div dynamically?

Question

This is very difficult to explain. I have some divs with id inside table

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

I need to populate these 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 a div that contains locid with the same identifier as my other div, and then paste this html into the div in the dgAvailable table

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

I have no other way to describe this?

thank

Jamie

Answer 1

Try the following:

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

Here you can try the demo with your markup .

---

If you have control over this other markup, you can clear it up significantly using the data attribute, for example:

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

jQuery , :

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

, node , .append(), :

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

Answer 2

.

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