2011-09-11 16 views
28

Si tengo un elemento HTML como <div> con texto dentro u otros elementos, ¿puedo agregar antes o después de este div algunos datos de texto sin un elemento html, solo texto sin formato?Agregar texto antes o después de un elemento HTML

Me gustaría usar solo Javascript puro.

Algo así como:

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

Respuesta

43

sí, se puede crear un nodo de texto con document.createTextNode('the text')

A continuación, se puede insertar como un elemento, con appendChild o insertBefore.

Ejemplo que insertar un texto antes de #childDiv:

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

También podría probar los métodos "insertAdjacentText" o "insertAdjacentHTML": https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML –

1

Puede agregar nodo de texto. Crear nodo - document.createTextNode('text') y luego insertar/agregar/reemplazar - haga lo que quiera.

1

Algo así debe hacerlo:

<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> 
26

Sólo para que conste:

div.insertAdjacentHTML('beforeBegin', yourText); 

donde div es su child-DIV.

Demostración en directo:http://jsfiddle.net/ZkzDk/

+0

También puede agregarlo después ... div.insertAdjacentHTML ('afterEnd', 'mi texto agregado después'); ¿Alguien sabe si puede eliminarlo? (sin usar una clase o ID) – tkerwood

+0

@tkerwood Sure. Necesita recuperar una referencia a ese nodo * Text * y luego usar el método '.removeChild()' (en su padre). –

1

En lo que respecta al tema y los usuarios de pregunta para insertar antes o después, aquí es un ejemplo para después:

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

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

Si el childTag no lo hace tener hermanos, está bien porque el método insertBefore maneja este caso y simplemente lo agrega como el último hijo.

También puede posiblemente utilizar el método appendChild() después de crear el nodo de texto y luego agregar su etiqueta de hijo a través del parentNode.

Cuestiones relacionadas