我想在一些修改后将从字符串创建的 html 元素转换回字符串。但我得到一个空字符串。
$('<iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe>').html();
我怎么能以另一种方式做到这一点?
我想在一些修改后将从字符串创建的 html 元素转换回字符串。但我得到一个空字符串。
$('<iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe>').html();
我怎么能以另一种方式做到这一点?
你可以这样做:
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>
您想要的是外部 HTML,而不是内部 HTML:
$('<some element/>')[0].outerHTML;
尝试稍微不同的方法:
//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);
(document.body.outerHTML).constructor
将返回String
。(起飞.constructor
,这是你的字符串)
那可以做到:)
您可以将其包装到另一个元素中,然后调用html
:
$('<div><iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe></div>').html();
请注意,outerHTML
旧浏览器上不存在,但innerHTML
仍然存在(例如,在 ff < 11 中不存在,但仍在许多旧计算机上使用)