J'ai beaucoup <section> dans mon html <body> et je veux ajouter plus par javascript. Cependant, en utilisant innerHTML, je remplace simplement mes sections existantes par de nouvelles, au lieu de les ajouter aux anciennes.Comment ajouter du contenu au corps html en utilisant JS?
Que puis-je utiliser d'autre?
Vous pouvez utiliser
document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)
ou
document.getElementById("parentID").innerHTML+= "new content"
J'irais toujours pour les méthodes DOM si possible; ['.createElement'] (https://developer.mozilla.org/fr-fr/docs/DOM/document.createElement), [' .appendChild'] (https://developer.mozilla.org/en-US /docs/DOM/Node.appendChild), ['.insertBefore'] (https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore), [' .replaceChild'] (https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild), etc. –
Merci! Cela fonctionne très bien. – apr
Je sais que c'est une vieille réponse, mais + = sur innerHTML n'est pas un bon moyen d'ajouter du contenu à un élément. J'ai fait le signe + = sur un élément pour lequel les annonces étaient déjà chargées et les annonces étaient simplement vides après l'ajout de contenu. Passer à appendChild (élément) vs + = "content" a résolu le problème de la disparition de l'annonce. Juste un FYI pour les futurs utilisateurs qui ont atterri sur cette page de Google :) – Joe
Just:
document.getElementById('myDiv').innerHTMl += "New Content";
Vous utilisez probablement
document.getElementById('element').innerHTML = "New content"
Essayez ceci:
document.getElementById('element').innerHTML += "New content"
Ou, de préférence, utilisez DOMManipulation:
document.getElementById('element').appendChild(document.createElement("div"))
manipulation Dom serait préférable par rapport à l'utilisation innerHTML, parce que innerHTML décharges simplement une chaîne dans le document. Le navigateur devra réorganiser l'ensemble du document pour obtenir sa structure.
S'il vous plaît ne pas suggérer w3schools aux gens, il n'est pas officiellement lié à W3 et a beaucoup de désinformation (voir http://w3fools.com) –
Merci . C'est la même chose que les réponses ci-dessus et fonctionne très bien. – apr
@PaulS. Si vous avez un didacticiel différent de manipulation de DOM pour moi, je changerai volontiers le lien. – Cerbrus
Je pense que si vous voulez ajouter du contenu directement sur le corps, la meilleure façon est:
document.body.innerHTML = "bla bla";
ou
document.body.innerHTML = document.body.innerHTML + "bla bla";
Pour ajouter au lieu d'effacer >> document.body.innerHTML + = "bla bla"; – Trev14
Assurez-vous que vous avez la balise <html> ou <p> tag.
document.getElementsByTagName('html').appendChild("New Content");
ou
document.getElementsByTagName('p')[0].appendChild("New Content");
Vous pouvez changer le 0 de ^à l'ordre de <p>. Comme <p></p><p></p> et il sera ajouté sur le premier <p>. Commentez si un problème est survenu quelque peu.
Essayez la syntaxe suivante:
document.body.innerHTML += "<p>My new content</p>";
Dans la plupart des navigateurs, vous pouvez utiliser une variable javascript au lieu d'utiliser document.getElementById.Dites le contenu de votre corps HTML est comme ceci:
<section id="mySection"> Hello </section>
Ensuite, vous pouvez simplement se référer à mySection comme une variable javascript:
mySection.innerText += ', world'
// same as: document.getElementById('mySection').innerText += ', world'
Voir cet extrait:
mySection.innerText += ', world!'<section id="mySection"> Hello </section>
Si vous fournissez votre code jusqu'à présent, vous obtiendrez une spécification plus réponse ic. – gotohales