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?
This question is related to
javascript
jquery
html
(document.body.outerHTML).constructor
will return String
. (take off .constructor
and that's your string)
That aughta do it :)
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);
What you want is the outer HTML, not the inner HTML :
$('<some element/>')[0].outerHTML;
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)
Source: Stackoverflow.com