CODEWITHSUNDEEP
jqueryhtml
Emmanuel
Emmanuel

Reputation: 57

jquery convert html to string and to html

I have the following html:

<body>
 <div>
    <img id ="img1" src="http://aboveandbeyondkm.com/wp-content/uploads/2013/11/Angry-Birds-HD-Wallpaper.png" style="width:100px; height:100px;"/>
 </div>
</body>

and the following javascript:

var array1 = [];
array1[0] = $('#img1');

var ndiv = "<div style='border: 2px solid red;'>" + array1[0] + "</div>";
$('body').append(ndiv);

This is a waterdown version of what I'm trying to achieve but that's the basis of what I'm having difficulties with.

When I append ndiv it doesn't append the image because it's an object. I tried jquery text(), html() and parseHTML methods with no luck.

Any help would be greatly appreciated.

I made a jsfiddle:

jsfiddle example

Thanks

Update

I wanted to thank everyone for their prompt reply. Guffa answered the question correctly based on what I provided. But my code wasn't as simple as I presented it. Eman Z answer was the easiest to incorporate into the flow of my code. Wish I could choose two answers.

Here's an example of what I'm doing. Just to give a background. There's a forum that has something called topics. Each topic have a title, comments. views and thumbnails. Each topic can have several thumbnails. In order to see the thumbnails to get a preview of the topic one would have to do click on a button. So I wanted the thumbnails to show up automatically without clicking. So what I did was create a bookmarklet which has an iframe which loads the page that the thumbnails are in. I save all this info to an array. So the example you see in the jsfiddle may seem like I'm taking images and putting it into another array but I didn't want to write all the code to get the images so I chose to show it this way for simplicity.

jsfiddle solution

Upvotes: 2

Views: 14285

Answers (6)

num8er
num8er

Reputation: 19372

Sorry I was wrong in my previous answer. As said Guffa getting html() of image will return null. So here is working solution:

<script> 
$(function (){ 
    var array1 = []; 
    array1[0] = $('#img1').clone();
   var $ndiv = $("<div style='border: 2px solid red;'></div>");
   array1[0].appendTo($ndiv);
   $ndiv.appendTo('body'); 
}); 
</script>

Thank You Guffa for Your comment.

Upvotes: 0

Guffa
Guffa

Reputation: 700252

To do it like that you would need to turn the image element into an HTML string.

You can just create elements instead of creating HTML code for them first. This will move the image into the element:

var img = $('#img1');
var ndiv = $('<div>').css('border', '2px solid red').append(img);
$('body').append(ndiv);

Demo: http://jsfiddle.net/VttM4/4/

If you want to copy the image element instead, you can use the clone method:

var img = $('#img1').clone();

Upvotes: 0

Eman Z
Eman Z

Reputation: 167

Here's the gist of what you're trying to achieve:

    var nDiv = jQuery('<div />').append($('#img1'));
    $('body').append(nDiv);

If you want to use the string method you can use:

    $('#img1')[0].outerHTML

This will give you the html string.

Just like this: http://jsfiddle.net/VttM4/3/

Upvotes: 4

stackunderflow
stackunderflow

Reputation: 3873

Try the following :

array1[0] = $('#img1')[0]; 

var ndiv = "<div style='border: 2px solid red;'>" + array1[0] + "</div>";

$(ndiv).appendTo('body');

Upvotes: 0

num8er
num8er

Reputation: 19372

Try this:

<script>
$(function (){
    var array1 = []; 
    array1[0] = $('#img1'); 
    var ndiv = "<div style='border: 2px solid red;'>" + array1[0].html() + "</div>";
    $(ndiv).appendTo('body');
});
</script>

Upvotes: 0

dotnetom
dotnetom

Reputation: 24901

$('#img1') is a selector, which can have many results. If you want to get the first element of the selector you can use $('#img1')[0]. Then depending on the type of the result you can get to value, text, attribute or whatever you want.

Upvotes: 0

Related Questions