jQuery obtenir code html de conteneur, y compris le conteneur lui-même

Comment puis-je obtenir le code html sur '#container' notamment '#container' et pas juste ce qui est à l'intérieur.

<div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

J'ai ce qui obtient le code html à l'intérieur de #container. il ne comprend pas le #conteneur de l'élément lui-même. C'est ce que je cherche à faire

var x = $('#container').html();
$('#save').val(x);

Vérifier http://jsfiddle.net/rzfPP/58/

vous pourriez mettre récipient dans un autre récipient et d'obtenir que les conteneurs html... mais qui semble un peu hacky. peut-être que si on en savait un peu plus sur le problème, nous pourrions venir avec une solution viable? que faites-vous avec une zone de texte complet de html?
double possible de Obtenir de l'élément sélectionné extérieur HTML

InformationsquelleAutor Pinkie | 2011-06-23

javascript jquery

154

Si vous mettez le récipient dans un faux P tag, vous obtiendrez le conteneur HTML aussi.

Tout ce que vous devez faire est de
```
var x = $('#container').wrap('<p/>').parent().html();
```
Vérifier exemple de travail à http://jsfiddle.net/rzfPP/68/

À unwrap()la <p> tag lorsque vous avez terminé, vous pouvez ajouter
```
$('#container').unwrap();
```
- nous pouvons simplement utiliser clone() et vous n'aurez pas à vous soucier des éléments supplémentaires créés. var x = $('#container').clone().wrap('<p/>').parent().html();. L'idée de retour à la ligne est grande et beaucoup moins compliqué, alors la plupart des solutions proposées.
- Firefox question est out-of-date, donc j'ai suggèrent afin de voter pour @MikeM réponse parce que c'est dans le plus pur JS.
- Pourquoi un <p> tag? N'est-ce pas <div> plus de sens?
- Cela a une solution beaucoup plus simple. Voir ma réponse.
InformationsquelleAutor Hussein
127
```
var x = $('#container').get(0).outerHTML;
```
Mise à JOUR : C'est maintenant pris en charge par Firefox de FireFox 11 (Mars 2012)

Comme d'autres l'ont souligné, cela ne fonctionne pas dans FireFox. Si vous en avez besoin pour travailler dans FireFox, alors vous voudrez peut-être jeter un oeil à la réponse à cette question :
En jQuery, il y a aucune fonction similaire à html() ou texte (), mais de retour de l'ensemble du contenu de correspondance composant?
- Cela fonctionne dans Firefox, et c'est mieux que la solution retenue aujourd'hui.
- c'est une manière élégante de le faire, mieux que l'on a accepté la réponse, qui était juste un sale hack
- C'est parfait.
- c'est la réponse parfaite parce que l'emballage de la balise parent avec des div ou p est une mauvaise idée. peut-être votre css de casser. spécialement lorsque vous êtes à l'aide de bootstrap (e.g de formulaire en ligne). d'où cette réponse est tout à fait bonne.
InformationsquelleAutor ShaneBlake
66
```
var x = $('#container')[0].outerHTML;
```
- Firefox question est out-of-date, donc j'ai suggèrent afin de voter pour cette réponse.
- À l'aide de .clone() fonctionne, mais c'est beaucoup plus propre, de l'omi. La accepté de répondre crée de nouveaux éléments dans le DOM = mauvais.
InformationsquelleAutor MikeM
60

J'aime utiliser ce;
```
$('#container').prop('outerHTML');
```
- Cela semble être la meilleure solution pour moi, ne nécessite pas de manipulation du dom, ou pseudo manipulation du dom (l'écharpe méthodes). Et l'objet jquery déjà a la propriété.
- l'amour de cette solution
InformationsquelleAutor 1.44mb
12
```
$('#container').clone().wrapAll("<div/>").parent().html();
```
Mise à jour: outerHTML fonctionne sur firefox maintenant donc, utiliser l'autre réponse, sauf si vous avez besoin de supporter de très anciennes versions de firefox
- outerHTML propriété ne fonctionne pas sur Firefox, de sorte que vous devez faire avec clone
InformationsquelleAutor Robert Noack
3

Ancien mais goldie...

Depuis que l'utilisateur demande de jQuery, je vais faire simple:
```
var html = $('#container').clone();
console.log(html);
```
Violon ici.
- Cela n'aide pas à récupérer le code html du conteneur lui-même. Il n'a même pas de retour de code html. Je vois que ça peut être pratique pour accéder au nœud cible via clone pour éviter de modifier le dom, mais alors il serait bon de mentionner les raisons pour lesquelles vous utilisez cette méthode.
InformationsquelleAutor prinsen

$.fn.outerHtml = function(){
    if (this.length) {
        var div = $('<div style="display:none"></div>');
        var clone =
        $(this[0].cloneNode(false)).html(this.html()).appendTo(div);
        var outer = div.html();
        div.remove();
        return outer;
    }
    else {
        return null;
    }
};

de http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010

InformationsquelleAutor Achu Sreedhar

Firefox ne prend pas en charge outerHTML, si vous avez besoin de définir une fonction pour aider à la soutenir:

function outerHTML(node) {
    return node.outerHTML || (
        function(n) {
            var div = document.createElement('div');
            div.appendChild( n.cloneNode(true) );
            var h = div.innerHTML;
            div = null;
            return h;
        }
    )(node);
}

Ensuite, vous pouvez utiliser outerHTML:

var x = outerHTML($('#container').get(0));
$('#save').val(x);

InformationsquelleAutor kevinji

0
```
var x = $($('div').html($('#container').clone())).html();
```
- Vous êtes à la création de 3 jquery objets en une seule instruction. Bien que cela fonctionne, c'est inutile.
InformationsquelleAutor kei
-2

Solution Simple avec un exemple :
```
<div id="id_div">
  <p>content<p>
</div>
```
Déplacer cette DIV à d'autres DIV id = "other_div_id"
```
$('#other_div_id').prepend( $('#id_div') );
```
Finition
- L'OP est la demande du HTML brut, représenté par un objet jQuery, où cette méthode déplace un objet jQuery d'un endroit à un autre.
InformationsquelleAutor hassane86

Vous devez vous connecter pour publier un commentaire.