Création d'un objet jQuery à partir d'une grande chaîne HTML

Question

J'ai une grande chaîne HTML contenant plusieurs nœuds enfants.

Est-il possible de construire un jQuery Objet DOM utilisant cette chaîne ?

J'ai essayé $(string) mais il ne renvoie qu'un tableau contenant tous les noeuds individuels.

J'essaie d'obtenir un élément sur lequel je peux utiliser la fonction .find().

Answer 1

Mise à jour :

A partir de jQuery 1.8, nous pouvons utiliser $.parseHTML qui analysera la chaîne HTML en un tableau de nœuds DOM. ex :

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

alert( dom_nodes.find('input').val() );

DEMO

---

var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

DEMO

Ce qui se passe dans ce code :

• $('<div/>') est un faux <div> qui n'existe pas dans le DOM
• $('<div/>').html(string) ajoute string dans ce faux <div> comme des enfants
• .contents() récupère les enfants de ce faux <div> comme un objet jQuery

Si vous voulez faire .find() fonctionne alors essayez ceci :

var string = '<div><input type="text" value="val" /></div>',
    object = $('<div/>').html(string).contents();

alert( object.find('input').val() );

DEMO

Answer 2

Depuis jQuery 1.8, vous pouvez utiliser parseHtml pour créer votre objet jQuery :

var myString = "<div>Some stuff<div>Some more stuff<span id='theAnswer'>The stuff I am looking for</span></div></div>";
var $jQueryObject = $($.parseHTML(myString));

J'ai créé un JSFidle qui en fait la démonstration : http://jsfiddle.net/MCSyr/2/

Il analyse la chaîne HTML arbitraire en un objet jQuery, et utilise find pour afficher le résultat dans un div.

Answer 3

var jQueryObject = $('<div></div>').html( string ).children();

Cela crée un objet jQuery factice dans lequel vous pouvez placer la chaîne de caractères en HTML. Ensuite, vous obtenez uniquement les enfants.

Answer 4

Il existe également une grande bibliothèque appelée cheerio conçu spécifiquement pour cela.

Mise en œuvre rapide, souple et légère du noyau de jQuery, conçue spécifiquement pour le serveur.

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

Answer 5

J'utilise les éléments suivants pour mes modèles HTML :

$(".main").empty();

var _template = '<p id="myelement">Your HTML Code</p>';
var template = $.parseHTML(_template);
var final = $(template).find("#myelement");

$(".main").append(final.html());

Note : En supposant que vous utilisez jQuery