Alternative pour innerHTML?

https://stackoverflow.com/questions/718091

23-08-2019
|

Question

Je me demande s'il y a un moyen de changer le texte de quoi que ce soit en HTML sans utiliser innerHTML.

Je pose la question est parce qu'il est mal vu un peu sur le W3C. Je sais qu'il est tatillonne, mais je veux juste savoir, est-il possible?

EDIT: les gens semblent se méprendre sur ce que je demande ici. Je veux trouver un moyen de changer effectivly le texte affiché

Si j'ai:

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

innerHTML me permet de faire ceci:

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

Et aura changé le texte sur mon écran.
Je ne veux pas ajouter plus de texte, je souhaite modifier le texte existant allready.

La solution

La méthode recommandée est par la manipulation du DOM, mais il peut être assez bavard. Par exemple:

// <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.

modifier

En réponse à votre modification, afin de remplacer le contenu actuel, vous supprimez simplement le contenu existant, puis utilisez le code ci-dessus pour remplir le nouveau contenu. Par exemple:

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

Mais comme quelqu'un l'a dit, je vous recommande d'utiliser quelque chose comme jQuery au lieu, comme tous les navigateurs prennent en charge totalement DOM, et ceux qui ont des bizarreries qui sont traitées en interne par les bibliothèques JavaScript. Par exemple, jQuery ressemble à quelque chose comme ceci:

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

Autres conseils

La meilleure façon de le faire est d'utiliser document.createTextNode. L'une des principales raisons d'utiliser cette fonction au lieu de innerHTML est que tous les Escaping de caractères HTML sera pris en charge pour vous alors que vous auriez à échapper à votre chaîne vous-même si vous définissez simplement innerHTML.

Vous pouvez obtenir le même effet en manipulant les DOM. La meilleure façon de changer le texte est de supprimer tous les nœuds enfants de l'élément et les remplacer par un nouveau nœud de texte.

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

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

La suppression des nœuds enfants se débarrasse du contenu du texte de votre élément avant de le remplacer par le nouveau texte.

La raison pour la plupart des développeurs évitent d'utiliser innerHTML est que l'accès à des éléments dans les DOM est conforme aux normes.

Si vous voulez seulement changer le texte brut, puis il y a une solution plus rapide qui repose sur les normes:

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

De toute façon, s'il vous plaît noter que innerHTML va faire partie de la norme HTML 5 le prochain.

Simple

Remplacer text.innerHTML = 'two' avec 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;

Cela peut être aussi désagréable que innerHTML pour vous, mais il a l'avantage de travailler dans certains cas (IE) où innerHTML ou appendChild ne sont pas, comme certains nœuds de table, le texte des éléments de style et de script et la valeur de la forme champs

Vous pouvez utiliser DOM comme suit:

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

Mais je pense que tout le monde font rarement cela, mais utiliser un cadre comme jQuery ou Prototype ou tout autre framework javascript sur il à la place. Ceci est par exemple 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>

Il me semble que la combinaison CSS + HTML + JS devrait obtenir des effets souhaités:

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

...

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

...

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

Est-ce que quelqu'un sait si cela fonctionne dans la pratique?

Eh bien, je f Je comprends votre question cela devrait être une réponse.

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

Aussi la recherche d'une bonne alternative à element.innerHTML by-pass j'ai enfin trouvé cette solution:

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);

Une autre alternative sans