Using $(document).ready with a html inside a variable

Question

Can i use jquery function $(document).ready(function() {}); using a javascript variable containing html recovered from a $("#tableId").prop("outerHTML"); function as parameter? Just like down bellow:

$(document).ready(function() {
var tempHtml = $("#tabelaOriginal-1").prop("outerHTML");
$(tempHtml).ready(function() {
    $("someDivId").css( "background-color", "yellow" );
});

The tempHtml will suffer changes? Caused by the .css function call. In short, i need recover html data from a div and do some alterations and build a modal with this alterations without make any alterations in the original div. So i'm trying to use the inner call of jquery .ready function passing the outerHTML as parameter.

Answer 1

You can use jQuery's clone method for what you are trying to achieve.

$(document).ready(function() {
   var clone = $("#tabelaOriginal-1").clone();
   clone.css( "background-color", "yellow" );
   //Now use the cloned object in a modal or do whatever you want.
});

I strongly recommend you to go through clone documentation to understand it's optional features.