Question

I want create a plugin in jquery.

this is my html code :

<div class="popup">
  <div class="bc_top">
    <div class="bc_tl"></div>
    <div class="bc_tm"></div>
    <div class="bc_tr"></div>
  </div>
  <div class="bc_middle">
    <div class="bc_ml">
      <div class="bc_mr">
        <div class="bc_cnt">




        </div>
      </div>
    </div>
  </div>
  <div class="bc_bottom">
    <div class="bc_bl"></div>
    <div class="bc_bm"></div>
    <div class="bc_br"></div>
  </div>
</div>

I want insert above code around my tag, my tag html content should insert into div.bc_cnt , so I write a jQuery Plugin :

$.fn.popup = function() {
    $(this).before('<div class="popup">\
                      <div class="bc_top">\
                        <div class="bc_tl"></div>\
                        <div class="bc_tm"></div>\
                        <div class="bc_tr"></div>\
                      </div>\
                      <div class="bc_middle">\
                        <div class="bc_ml">\
                          <div class="bc_mr">\
                            <div class="bc_cnt">'+$(this).html()+'</div>\
                          </div>\
                        </div>\
                      </div>\
                      <div class="bc_bottom">\
                        <div class="bc_bl"></div>\
                        <div class="bc_bm"></div>\
                        <div class="bc_br"></div>\
                      </div>\
                    </div>');   

}

and I use like this :

<scritp>
    $('div#pop').popup();
</script>


    <div id="pop">
        this is a test
    </div>

everything is OK but this code insert only html content of selected tag to popup with $(this).html(), I want insert complete tag in my popup (I mean <div id="pop">this is a test</div>)

What should I do?

P.S: sorry for my bad English.

Answer 1

You can clone the orig element, append it to a temp div and get the html of the div. See below,

$('<div>').append($(this).clone()).html()

DEMO

If you want to remove the original, you can use .remove at the end of the function as $(this).remove()