javascript - JavaScript / JQueryでHTML要素を文字列に変換する

Question

文字列から作成された html 要素を、いくつかの変更後に文字列に変換したいと思います。しかし、代わりに空の文字列を取得します。

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

どうすれば別の方法でそれを行うことができますか?

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>

フィドルのデモ

Answer 2

必要なのは、内側の HTML ではなく、外側の HTML です。

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

Answer 3

(document.body.outerHTML).constructor戻りStringます。（離陸.constructor、それがあなたの紐です）

それはそれをやります:)

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