CODEWITHSUNDEEP
javascriptjqueryhtml
ciembor
ciembor

Reputation: 7337

Converting HTML element to string in JavaScript / JQuery

I would like to convert a html element created from a string back to the string after some modifications. But I get an empty string instead.

$('<iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe>').html();

How can I do that another way?

Upvotes: 26

Views: 170675

Answers (5)

palaѕн
palaѕн

Reputation: 73896

You can do this:

var $html = $('<iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe>');    
var str = $html.prop('outerHTML');
console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

FIDDLE DEMO

Upvotes: 43

Cody
Cody

Reputation: 10015

(document.body.outerHTML).constructor will return String. (take off .constructor and that's your string)

That aughta do it :)

Upvotes: 3

Gal Samuel
Gal Samuel

Reputation: 493

Try a slight different approach:

//set string and append it as object
var myHtmlString = '<iframe id="myFrame" width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe>';
$('body').append(myHtmlString);

//as you noticed you can't just get it back
var myHtmlStringBack = $('#myFrame').html(); 
alert(myHtmlStringBack); // will be empty (a bug in jquery?) but...

//since an id was added to your iframe so you can retrieve its attributes back...
var width = $('#myFrame').attr('width');
var height = $('#myFrame').attr('height');
var src = $('#myFrame').attr('src');
var myReconstructedString = '<iframe id="myFrame" width="'+ width +'" height="'+ height +'" src="'+ src+'" frameborder="0" allowfullscreen></iframe>';
alert(myReconstructedString);

Upvotes: 1

Adassko
Adassko

Reputation: 5343

you can just wrap it into another element and call html after that:

$('<div><iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe></div>').html();

note that outerHTML doesn't exist on older browsers but innerHTML still does (it doesn't exist for example in ff < 11 while it's still used on many older computers)

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382122

What you want is the outer HTML, not the inner HTML :

$('<some element/>')[0].outerHTML;

Upvotes: 40

Related Questions