Ajouter du texte avant ou après un élément HTML

Question

Si j'ai un élément HTML comme <div> avec du texte à l'intérieur ou d'autres éléments puis-je ajouter avant ou après ce div quelques données de texte sans un élément html, juste du texte? Je ne souhaite utiliser que du Javascript pur. Je veux utiliser uniquement du Javascript pur.

Quelque chose comme:

<div id="parentDiv"> 
    my text must be added here 
    <div id="childDiv"></div> 
</div> 

Answer 1

Oui, vous pouvez créer un nœud de texte avec document.createTextNode('the text')

Ensuite, vous pouvez l'insérer comme un élément, avec appendChild ou insertBefore.

exemple que insérer un texte avant #childDiv:

var text = document.createTextNode('the text'); 
var child = document.getElementById('childDiv'); 
child.parentNode.insertBefore(text, child); 

Answer 2

Vous pouvez ajouter nœud de texte. Créez un nœud - document.createTextNode('text') puis insérez/ajoutez/remplacez - faites ce que vous voulez.

Answer 3

Quelque chose comme ça devrait le faire:

<script type="text/javascript"> 
    var parent = document.getElementById('parentDiv'); 
    var sibling = document.getElementById('childDiv'); 
    var text = document.createTextNode('new text'); 
    parent.insertBefore(text, sibling); 
</script> 

Answer 4

Pour la petite histoire:

div.insertAdjacentHTML('beforeBegin', yourText); 

où div est votre enfant-DIV.

démonstration en direct:http://jsfiddle.net/ZkzDk/

Answer 5

En ce qui concerne le sujet et les utilisateurs la question pour l'insertion avant ou après, voici un exemple pour après:

var text = document.createTextNode("my text must be added here."); 
    var childTag = document.getElementById("childDiv"); 

    childTag.parentNode.insertBefore(text, childTag.nextSibling); 

Si le childTag ne avoir des frères et sœurs, c'est correct car la méthode insertBefore gère ce cas et l'ajoute simplement comme le dernier enfant.

Vous pouvez également éventuellement utiliser la méthode appendChild() après avoir créé un nœud de texte, puis ajouter votre balise childTag via le parentNode.