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

Si j'ai un élément HTML comme <div> avec un peu de texte à l'intérieur ou à l'autre des éléments puis-je ajouter avant ou après cette div certaines données de texte sans un élément html, juste en texte brut?

Je voudrais utiliser qu'un pur Javascript.

Quelque chose comme :

<div id="parentDiv">
   my text must be added here
  <div id="childDiv"></div>
</div>
InformationsquelleAutor John | 2011-09-11
  1. 46

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

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

    Exemple insérer un texte avant #childDiv:

    var text = document.createTextNode('the text');
var child = document.getElementById('childDiv');
child.parentNode.insertBefore(text, child);
    InformationsquelleAutor Arnaud Le Blanc
  2. 27

    Juste pour le record:

    div.insertAdjacentHTML( 'beforeBegin', yourText );

    où div votre enfant est-DIV.

    Démo Live: http://jsfiddle.net/ZkzDk/

    • Vous pouvez également l'ajouter après... div.insertAdjacentHTML( 'afterEnd', 'mon texte ajouté après"); personne Ne sait si vous pouvez le supprimer? (sans l'aide d'une classe ou un id)
    • Assurez-vous. Vous avez besoin de récupérer une référence à cette Texte noeud, puis utiliser le .removeChild() méthode (de sa mère).
    InformationsquelleAutor Šime Vidas
  3. 3

    En ce qui concerne le sujet, et les utilisateurs de la question de 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 n'a pas de frères et sœurs, c'est bien parce que la méthode insertBefore s'occupera de cette affaire et ajoute simplement comme le dernier enfant.

    Aussi peut éventuellement utiliser la méthode appendChild() après la création d'un nœud de texte puis d'ajouter votre childTag via le parentNode.

    InformationsquelleAutor javaBean007
  4. 1

    Vous pouvez ajouter un nœud de texte. Créer nœud - document.createTextNode('text') puis insérer/ajouter/remplacer - faire ce que vous voulez.

    InformationsquelleAutor Leonid
  5. 1

    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>
    InformationsquelleAutor kfuglsang
  6. 1

    Si vous avez juste besoin de texte, je trouve que élément .insertAdjacentText(position, texte) est flexible pour de nombreux scénarios et est également compatible avec les anciens navigateurs comme IE6. Où position est exactement là où vous voulez que le texte soit et text est le nœud de texte ou tout simplement une chaîne de caractères. Les options sont:

    • 'beforebegin' Avant de l'élément lui-même.
    • 'afterbegin' Juste à l'intérieur de l'élément, avant son premier enfant.
    • 'beforeend' Juste à l'intérieur de l'élément, après son dernier enfant.
    • 'afterend' Après l'élément lui-même.

    Comme ceci:

    let div = document.getElementById('parentDiv');
div.insertAdjacentText('afterbegin', 'My Plain Text..');
    InformationsquelleAutor Juan Marco