JavaScript / JQuery中将HTML元素转换为字符串

Question

我想将一个由字符串创建的HTML元素在进行一些修改后转换回字符串，但我却得到了一个空字符串。

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

我该怎么用另一种方式做这件事？

- ciembor

---

缓存字符串！或者outerHtml确实 - mikakun

Answer 1

你可以这样做：

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

- palaѕн

Answer 2

你想要的是外部 HTML，而不是内部 HTML ：

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

- Denys Séguret

---

另一种方法是通过 $('<some element/>').prop('outerHTML') 来完成。 - Weijing Jay Lin

Answer 3

(document.body.outerHTML).constructor将返回String。（去掉.constructor，你就得到了一个字符串）

这样应该就可以了 :)

- Cody

Answer 4

尝试一个略微不同的方法：

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

- Gal Samuel

Answer 5

你可以将它包装在另一个元素中，然后调用html：

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

请注意，outerHTML 在旧版浏览器中不存在，但 innerHTML 仍然存在（例如，在 Firefox < 11 中不存在，而在许多旧计算机上仍在使用）。

- Adassko