We help IT Professionals succeed at work.

jquery clone object and insert into variable before inserting back to dom

Hi guys

i am trying to copy a input box and clone it into the box variable. and then insert it into my newObject variable before putting in into the dom again. but how do i do that? when i do it like i have done in my example it just writes..

[object object]. i need it to be executed of course.
$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = "<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>";
        
        
        $(this).replaceWith(newObject);
        
    });

Open in new window

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Wrap in $()
And change box to box.html()
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Like this
var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box.html()
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");

Open in new window

Author

Commented:
Hi

I did that. both with box and box.html()

box still reports object object . box.html is nothing
$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box.html()
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");
        
        
        $(this).replaceWith(newObject);
        
    });








$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");
        
        
        $(this).replaceWith(newObject);
        
    });

Open in new window

You can't add the object to the html. Do this:

 box.html()
                     
Ahh I just noticed you tried that.
var box = $(this).clone(true);

...

box.html();

Author

Commented:
so i have to insert it to the dom before inserting the box? i cant do it in the variable?

Author

Commented:
you can do it like so

but it is not ideal :(
$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");
        
        
        $(this).replaceWith(newObject);
        $('.inputContainer').html($(this).clone()).removeClass("inputContainer");
        
        
    });

Open in new window

look at .clone(true) you have .clone()

Author

Commented:
that doesnt really do any difference

Here's a slightly different approach that might be a bit easier:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27430026.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script>

jQuery(document).ready( function() {

  $("#test").click( function() {
    var wrapper = $("<div/>").text("Wrapper").css( {border: "3px solid red"} )
    var after = $("<div/>").text("After").css( {border: "3px solid green"} );
    $(".morph").each( function() {
      $(this).after( after.clone() );
      $(this).wrap( wrapper );
    });
    
    $(this).attr( {disabled: true} );
  });

});

</script>
</head>

<body>

<input id="test" type="button" value="Test" />

<input class="morph" value="xxx" />
<input class="morph" value="yyy" />
<input class="morph" value="zzz" />

</body>
</html>

Open in new window

Author

Commented:
thanks so much