9
votes

meilleure façon d'écrire jQuery remplacerwith () en JavaScript naturel

avoir des problèmes avec une fonction frappant la page dès que possible, alors j'ai besoin de l'écrire dans pure JavaScript et l'inclure dans la tête. Je ne sais pas comment y aller, car comme je le comprends, en utilisant .replace (), le nouvel élément sera déplacé vers un emplacement différent de la page. Le comportement remplacé par JQuery est idéal. XXX


2 commentaires

Quel est le problème avec l'utilisation de JQuery à nouveau?


.replace () est pour les chaînes. S'il vous plaît ne l'utilisez pas pour DOM. Pourriez-vous décrire votre problème un peu mieux? Vous dites que vous voulez que un élément soit remplacé dès qu'il apparaît, et n'attendez pas que le reste de la DOM soit prêt?


3 Réponses :


8
votes
var image = document.getElementById('imagefiles'), parent = image.parentNode,
input = document.createElement('input');
input.id = input.name = "imagefiles";
input.type = 'file';

parent.replaceChild(input, image);

4 commentaires

Pourquoi le div ? Ce sera plus rapide et moins de code pour créer simplement l'entrée directement. entrée = document.createeelement ("entrée"); INPUT.TYPE = "Fichier"; INPUT.ID = INPUT.NAME = "ImageFiles";


@qwertymk Il fonctionne dans Jsfiddle, mais mon webinspector montre une erreur sur la ligne finale: "SyntaxExError non capturé: jeton inattendu illégal"


@TechnopEsant: mec, tu dois voter plus Pour amener les gens à vous répondre, 11 votes de tous les temps quand vous avez posé 128 questions?


@technopeasant: Vous pouvez prendre des caractères invisibles et illégaux si vous copiez / coller de Jsfiddle. Mieux vaut copier le code d'ici à la place.



0
votes
  const node = new DOMParser().parseFromString(html, 'text/html').body.childNodes[0];
  document.getElementById(id).replaceWith(node);

0 commentaires

0
votes
let element = document.getElementById("imagefiles");
element.insertAdjacentHTML("afterend","<input type='file' name='imagefiles' id='imagefiles' />");
element.parentNode.removeChild(element);

Years later. There is now an childNode.replaceWith() but it is not strictly equivalent to the JQuery replaceWith(); Nor is it compatible with I.E.The above code creates a document fragment from the given HTML, and inserts it after the original element in the DOM and then deletes the original element, effectively replacing it.https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

0 commentaires