.html() et .append() sans jQuery

Question

Quelqu'un peut-il me dire comment utiliser ces deux fonctions sans utiliser jQuery ?

J'utilise une application pré-codée dans laquelle je ne peux pas utiliser jQuery, et je dois prendre HTML d'un div et le déplacer vers un autre en utilisant JS.

Answer 1

Vous pouvez remplacer

 var content = $("#id").html();

avec

 var content = document.getElementById("id").innerHTML;

et

 $("#id").append(element);

avec

 document.getElementById("id").appendChild(element);

Answer 2

Pour copier du HTML d'une div à une autre, utilisez simplement le DOM.

 function copyHtml(source, destination) {
  var clone = source.ownerDocument === destination.ownerDocument
      ? source.cloneNode(true)
      : destination.ownerDocument.importNode(source, true);
  while (clone.firstChild) {
    destination.appendChild(clone.firstChild);
  }
}

Pour la plupart des applications, inSameDocument sera toujours vrai, vous pouvez donc probablement éliminer toutes les parties qui fonctionnent lorsqu'il est faux. Si votre application comporte plusieurs cadres dans le même domaine interagissant via JavaScript, vous souhaiterez peut-être les conserver.

Si vous souhaitez remplacer le HTML, vous pouvez le faire en vidant la cible puis en copiant dedans :

 function replaceHtml(source, destination) {
  while (destination.firstChild) {
    destination.removeChild(destination.firstChild);
  }
  copyHtml(source, destination);
}

Answer 3

Quelques années de retard pour la fête mais quoi qu'il en soit, voici une solution :

 document.getElementById('your-element').innerHTML += "your appended text";

Cela fonctionne très bien pour ajouter du code HTML à un élément dom.

Answer 4

.html() et .append() sont des fonctions jQuery, donc sans utiliser jQuery, vous voudrez probablement regarder document.getElementById("yourDiv").innerHTML

Javascript InnerHTML