jquery convert html to string and to html

Question

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

Thanks for the prompt reply. I tried this and it didn't work. The issue is I need array1[0] to be converted to a string (<img id ="img1" src="aboveandbeyondkm.com/wp-content/uploads/2013/11/…" style="width:100px; height:100px;"/>) and then append the string to the body. — Emmanuel
– Emmanuel, Commented Jun 8, 2014 at 19:50

Eman Z · Accepted Answer · 2014-06-08 19:59:01Z

4

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/

edited Jun 8, 2014 at 19:59

answered Jun 8, 2014 at 19:44

Eman Z

1774 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emmanuel Over a year ago

Thanks. Your answer made me to the minimum refactoring of my code. I used the outerHTML. Thanks again.

krivtom · Accepted Answer · 2014-06-08 19:43:15Z

0

$('#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.

answered Jun 8, 2014 at 19:43

krivtom

25k10 gold badges53 silver badges54 bronze badges

2 Comments

num8er Over a year ago

$('#img1') does not return array of.results. It returns 1 object because.it uses getElementById. No need to.use [0] to get the first element. Cuz it's already single.object.

stackunderflow Over a year ago

@num8er true that $("#img1") Return one object, but this one object is a jQuery object that contains inside it one DOM object (html img element) and hence you have to index the JQuery object

num8er · Accepted Answer · 2014-06-08 19:52:31Z

0

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>

edited Jun 8, 2014 at 19:52

answered Jun 8, 2014 at 19:45

num8er

19.5k4 gold badges50 silver badges61 bronze badges

3 Comments

Guffa Over a year ago

The html method returns the HTML code inside the element, which is an empty string for an image element.

num8er Over a year ago

I think.problem.is.not.in.my code. It's because the.author.of.question does not handle.document.ready event.

num8er Over a year ago

Thank You Guffa I've fixed it in my next answer. I was wrong.

stackunderflow · Accepted Answer · 2014-06-08 19:54:12Z

0

Try the following :

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

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

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

answered Jun 8, 2014 at 19:54

stackunderflow

3,8835 gold badges34 silver badges46 bronze badges

Comments

Guffa · Accepted Answer · 2014-06-08 20:00:41Z

0

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();

edited Jun 8, 2014 at 20:00

answered Jun 8, 2014 at 19:45

Guffa

703k112 gold badges760 silver badges1k bronze badges

Comments

num8er · Accepted Answer · 2014-06-08 20:08:07Z

0

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.

edited Jun 8, 2014 at 20:08

answered Jun 8, 2014 at 19:59

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Collectives™ on Stack Overflow

jquery convert html to string and to html

6 Answers 6

1 Comment

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related