Alternativa para innerHtml?

https://stackoverflow.com/questions/718091

23-08-2019
|

Pregunta

Me pregunto si hay una manera de cambiar el texto de cualquier cosa en formato HTML sin utilizar innerHTML.

La razón que estoy pidiendo es porque está un poco mal visto por el W3C. Sé que es quisquilloso, pero yo sólo quiero saber, ¿hay alguna manera?

EDIT: la gente parece no entender lo que estoy pidiendo aquí:. Quiero encontrar una manera de cambiar effectivly el texto que se muestra

Si tengo:

<div id="one">One</a>

innerHtml me permite hacer esto:

var text = document.getElementsById("one");
text.innerHTML = "Two";

Y el texto en mi pantalla habrá cambiado.
No deseo para añadir más texto, deseo cambiar allready texto existente.

Solución

La forma recomendada es a través de la manipulación DOM, pero puede ser bastante detallado. Por ejemplo:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

editar

En respuesta a su edición, con el fin de sustituir el contenido actual, sólo tiene que quitar el contenido existente, a continuación, utilizar el código anterior para rellenar el nuevo contenido. Por ejemplo:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

Pero como alguien más ha dicho, me gustaría recomendar el uso de algo como jQuery lugar, ya que no todos los navegadores soportan plenamente DOM, y los que tienen peculiaridades que son tratadas internamente por las bibliotecas de JavaScript. Por ejemplo, jQuery es como la siguiente:

$('#someID').html("<p>Hello, <b>World</b>!</p>");

Otros consejos

La mejor forma de hacerlo es utilizar document.createTextNode . Una de las principales razones para el uso de esta función en lugar de innerHTML es que todo el escape de caracteres HTML se tomará el cuidado de usted mientras que usted tendría que escapar de la cadena de sí mismo si estuviera simplemente configurando innerHTML.

Usted puede obtener el mismo efecto mediante la manipulación del DOM. La forma más segura de cambiar el texto es eliminar todos los nodos secundarios del elemento y reemplazarlos con un nuevo nodo de texto.

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

La eliminación de los nodos secundarios se deshace del contenido de texto de su elemento antes de reemplazarlo con el nuevo texto.

La razón por la mayoría de los desarrolladores evitar el uso de innerHTML es que el acceso a los elementos a través del DOM es compatible con las normas.

Si sólo desea cambiar el texto sin formato, entonces hay una solución más rápida que se basa en estándares:

document.getElementById("one").firstChild.data = "two";

De todos modos, tenga en cuenta que innerHtml va a ser parte de la próxima HTML 5 estándar.

simple.

Reemplazar text.innerHTML = 'two' con text.firstChild.nodeValue = 'two'.

var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

Esto puede ser tan desagradable tan innerHTML para usted, pero tiene la ventaja de trabajar en algunos casos (IE), donde innerHTML o appendChild no lo hacen, al igual que algunos nodos de tabla, el texto de elementos de estilo y de la escritura y el valor de la forma campos

Se puede usar DOM de la siguiente manera:

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

Pero yo creo que nadie rara vez hacer esto pero el uso de un marco como jQuery o Prototype o cualquier otro marco Javascript a cabo hay lugar. Esto es ejemplo jquery:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>

Me parece que la combinación de CSS + HTML + JS debe lograr los efectos deseados:

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

¿Alguien sabe si esto funciona en la práctica?

Bien i f i entiendo su pregunta correctamente esto debe ser una respuesta.

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";

También en busca de una buena alternativa a element.innerHTML de derivación finalmente encontrado que la solución:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

Otra alternativa sin