在 JavaScript / JQuery 中将 HTML 元素转换为字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19812510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting HTML element to string in JavaScript / JQuery
提问by ciembor
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.
我想在一些修改后将从字符串创建的 html 元素转换回字符串。但我得到一个空字符串。
$('<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?
我怎么能用另一种方式做到这一点？
回答by pala?н
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>回答by Denys Séguret
What you want is the outer HTML, not the inner HTML :
您想要的是外部 HTML，而不是内部 HTML ：
$('<some element/>')[0].outerHTML;
回答by Gal Samuel
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);
回答by Cody
(document.body.outerHTML).constructorwill return String. (take off .constructorand that's your string)
(document.body.outerHTML).constructor会回来String。（起飞.constructor，那是你的绳子）
That aughta do it :)
那就去做吧:)
回答by Adassko
you can just wrap it into another element and call htmlafter that:
您可以将其包装到另一个元素中并html在此之后调用：
$('<div><iframe width="854" height="480" src="http://www.youtube.com/embed/gYKqrjq5IjU?feature=oembed" frameborder="0" allowfullscreen></iframe></div>').html();
note that outerHTMLdoesn't exist on older browsers but innerHTMLstill does (it doesn't exist for example in ff < 11 while it's still used on many older computers)
请注意，outerHTML在较旧的浏览器上不存在但innerHTML仍然存在（例如在 ff < 11 中不存在，而在许多较旧的计算机上仍然使用它）
