web-dev-qa-db-fra.com

Conversion d'un élément HTML en chaîne dans JavaScript/JQuery

Je voudrais convertir un élément html créé à partir d'une chaîne en chaîne après quelques modifications. Mais je reçois une chaîne vide à la place.

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

Comment puis-je faire cela d'une autre manière?

javascriptjqueryhtml
18
ciembor

Tu peux le faire:

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

38
palaѕн

Ce que vous voulez, c'est le HTML externe, pas le HTML interne:

$('<some element/>')[0].outerHTML;
31
Denys Séguret

Essayez une approche légèrement différente:

//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);
1
Gal Samuel

vous pouvez simplement l'envelopper dans un autre élément et appeler html après cela:

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

notez que outerHTML n'existe pas sur les anciens navigateurs mais que innerHTML l'est toujours (il n'existe pas par exemple dans ff <11 alors qu'il est encore utilisé sur de nombreux ordinateurs plus anciens)

0
Adassko

(document.body.outerHTML).constructor retournera String. (décollez .constructor et c'est votre chaîne)

Cet aughta le faire :)

0
Cody