Ajouter des éléments HTML de manière dynamique avec JavaScript dans DIV avec un identifiant spécifique

Ok, bon, j'ai besoin de votre aide. J'ai trouvé un code ici sur Stackoverflow (ne peut pas trouver ce lien) qui génèrent un code HTML de manière dynamique via JS. Voici le code:

function create(htmlStr) { var frag = document.createDocumentFragment(), temp = document.createElement('div'); temp.innerHTML = htmlStr; while (temp.firstChild) { frag.appendChild(temp.firstChild); } return frag; } var fragment = create('<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>'); document.body.insertBefore(fragment, document.body.childNodes[0]);

Ce code fonctionne très bien! Mais les cibles de code générées en haut de la page, juste en dessous de l'étiquette du body . Mon souhait est de générer ce code à l'intérieur de div vide avec id="generate-here" spécifique.

Donc, la sortie sera:

 <div id="generate-here"> <!-- Here is generated content --> </div>

Je sais que je ne vois pas le contenu généré avec "view source". Je n'ai besoin que de générer ce contenu juste dans cet endroit particulier avec #generate-here . Je suis noob Javascript, donc si quelqu'un peut simplement réorganiser ce code qui sera parfait. Merci beaucoup!

PS Je sais comment faire cela avec Jquery, mais j'ai besoin d'un JavaScript natif et pur dans ce cas.

Tout ce que vous devez faire est de changer la dernière ligne. Cela ajoutera l'élément créé en tant que dernier enfant de la division:

 document.getElementById("generate-here").appendChild(fragment);

Cela ajoutera l'élément créé comme le premier enfant de la division:

 var generateHere = document.getElementById("generate-here"); generateHere.insertBefore(fragment, generateHere.firstChild);

Vous pouvez également utiliser innerHTML pour simplement remplacer tout par un nouveau texte (comme vous le faites dans votre fonction de create ). Évidemment, celui-ci ne vous oblige pas à conserver la fonction de create car vous avez besoin d'une chaîne html au lieu d'un objet DOM.

 var generateHere = document.getElementById("generate-here"); generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';

Étape 1. Créez une fonction pour nous renvoyer une liste de lecture HTML ordonnée. Notez que nous passons dans une série de données:

 function createListView(spacecrafts){ var listView=document.createElement('ol'); for(var i=0;i<spacecrafts.length;i++) { var listViewItem=document.createElement('li'); listViewItem.appendChild(document.createTextNode(spacecrafts[i])); listView.appendChild(listViewItem); } return listView; }

Étape 2. Ensuite, nous allons afficher notre liste dans votre division:

 document.getElementById("displaySectionID").appendChild(createListView(myArr));