Преобразование HTML-элемента в строку в JavaScript/JQuery

Я хотел бы преобразовать элемент html, созданный из строки обратно в строку после некоторых изменений. Но вместо этого я получаю пустую строку.

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

Как я могу сделать это другим способом?

Ответ 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>

Ответ 2

Для вас нужен внешний HTML, а не внутренний HTML:

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

Ответ 3

вы можете просто перенести его в другой элемент и вызвать 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, пока он все еще используется на многих старых компьютерах)

Ответ 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);

Ответ 5

(document.body.outerHTML).constructor вернет String. (снимите .constructor и что ваша строка)

Чтобы это сделать:)