it-swarm.it

Aggiungi testo prima o dopo un elemento HTML

Se ho un elemento HTML come <div> con del testo all'interno o con altri elementi posso aggiungere prima o dopo questo div alcuni dati di testo senza un elemento html, solo testo normale?

Vorrei usare solo Javascript puro.

Qualcosa di simile a :

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

Sì, puoi creare un nodo di testo con document.createTextNode('the text')

Quindi puoi inserirlo come un elemento, con appendChild o insertBefore.

Esempio che inserisce un testo prima di #childDiv:

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

Solo per la cronaca:

div.insertAdjacentHTML( 'beforeBegin', yourText );

dove div è il tuo DIV figlio.

Demo live: http://jsfiddle.net/ZkzDk/

27
Šime Vidas

Per quanto riguarda l'argomento e la domanda degli utenti per l'inserimento prima o dopo, ecco un esempio per dopo:

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

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

Se childTag non ha fratelli, va bene perché il metodo insertBefore gestisce questo caso e lo aggiunge semplicemente come ultimo figlio.

Inoltre, è possibile utilizzare il metodo appendChild () dopo aver creato il nodo di testo, quindi aggiungere il childTag tramite parentNode.

3
javaBean007

Se hai solo bisogno di testo, trovo che element.insertAdjacentText(position, text) è flessibile per molti scenari ed è anche compatibile con browser più vecchi come IE6. Dove position è esattamente dove vuoi che sia il testo e text è il nodo di testo o solo una stringa. Le opzioni sono:

  • 'beforebegin' Prima dell'elemento stesso.
  • 'afterbegin' Appena dentro l'elemento, prima del suo primo figlio.
  • 'beforeend' Appena dentro l'elemento, dopo il suo ultimo figlio.
  • 'afterend' Dopo l'elemento stesso.

Come questo:

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

È possibile aggiungere un nodo di testo. Crea nodo - document.createTextNode('text') e poi inserisci/aggiungi/sostituisci - fai quello che vuoi.

1
Leonid

Qualcosa del genere dovrebbe farlo:

<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>
1
kfuglsang