jQuery Girl
  1. jQuery Girl
  3. Comment obtenir une référence au nouvel object DOM après avoir modifié le contenu avec outerHTML?
Intereting Posts
Est-il possible de soustraire un nombre du style en ligne injecté par JavaScript? La flèche de sorting ng-repeat ne fonctionne pas dans les tables de données javascript Masquer les lignes dans JSP et en fonction des valeurs d’une colonne Cacher / afficher développe toutes les divs quand je veux qu’il s’ouvre un à la fois Jquery DataTable Sorting La colonne de valeur numérique ne fonctionne pas correctement Ajouter dynamicment des scripts dans une div à l’aide de Jquery Comment boucler .animate JQuery Exclure les dates dans le sélecteur de date jQuery à l’aide de beforeShowDay et d’un tableau d’objects JS pour le bouton de transfert d’image au survol (comme Facebook) Enveloppez tous les 2 divs dans un nouveau div Comment puis-je avoir le comportement d’attachement de jQuery à un élément après son insertion? Plug-in de validation jQuery – Comment NE PAS afficher les étiquettes «Ce champ est obligatoire» Comment append jQuery à une page HTML? jQuery .load () ne charge pas le script jqgrid inlineNav add – affiche l’icône de sauvegarde sur la ligne ajoutée

Comment obtenir une référence au nouvel object DOM après avoir modifié le contenu avec outerHTML?

J’ai une division que je dois changer son HTML externe sur un événement. Le problème est que lors de la définition de outerHTML je ne suis pas en mesure de référencer le nouvel object DOM sélectionné, à moins que je ne le récupère explicitement.

Existe-t-il un moyen de mettre à jour directement la référence de la variable lors de l’appel de outerHTML (dans mon cas, la référence de la variable div ci-dessous)? 

 $("#changeDiv").click(function(){ var div = $(this).prev(); div[0].outerHTML = `
 
 World 
 
`; console.log(div); // logs [div#imFirstDiv, prevObject: n.fn.init[1], context: button#changeDiv] // the following line does not affect the newly added division // since the var `div` references the old DOM object // unless I add div = $(this).prev(); before setting the html of // the paragraph it will not set it div.find('p').html('Override'); });

Lorsque vous voyez que le fait de changer le outerHTML un effet étrange, vous remplacez complètement l’élément d’origine tout en faisant référence à l’ancien.

Il serait préférable de créer une nouvelle div , de l’append after() l’ancien, puis de remove() l’ancien. Cela maintient la position de la div au bon endroit. 

 $("#changeDiv").click(function(){ // get the oldDiv var oldDiv = $(this).prev(); // Create a newDiv var newDiv = $('
 
 World 
 
'); // add newDiv after oldDiv one, then remove oldDiv from the DOM. oldDiv.after(newDiv).remove(); // now you still have the reference to newDiv, so do what you want with it newDiv.find('p').html('Override'); }); 
  
 
 Hello

J’ai résolu ce problème en obtenant un élément de référence (frère ou sœur) de la balise à remplacer.

Voici une fonction qui ne dépend pas de quel élément allez-vous changer: 

 function replaceElement(ele, outerHTML) { var parent = false, refEle; //if element that's going to be changed has previousElementSibling, take it as reference. If not, the parentElement will be the reference. if (ele.previousElementSibling !== null) refEle = ele.previousElementSibling; else { refEle = ele.parentElement; //indicate that parentElement has been taken as reference parent = true; } //change the outerHTML ele.outerHTML = outerHTML; //return the correct reference if (parent) return refEle.firstElementChild; else return refEle.nextElementSibling; }

Donc, dans votre cas, vous l’invoqueriez comme suit: 

 div[0] = replaceElement(div[0], '
 
 World 
 
');

J’espère que cela fonctionnera également avec jQuery, car tous mes scripts ne sont écrits qu’en javascript natif.