web-dev-qa-db-fra.com

Alternative pour innerHTML?

Je me demande s'il existe un moyen de modifier le texte de quelque chose en HTML sans utiliser innerHTML.

La raison pour laquelle je pose cette question, c’est parce que le W3C n’apprécie pas vraiment les choses… __. Je sais que c’est mordant, mais je veux juste savoir, est-il possible?

EDIT: les gens semblent mal comprendre ce que je demande ici: je veux trouver un moyen de changer efficacement 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 le texte sur mon écran aura changé.
Je ne souhaite pas ajouter de texte supplémentaire, je souhaite modifier le texte existant.

javascriptw3cinnerhtml
34
KdgDev

La méthode recommandée consiste à manipuler le DOM, mais cela peut être assez détaillé. 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 recommanderais plutôt d'utiliser quelque chose comme jQuery, car tous les navigateurs ne prennent pas totalement en charge le DOM, et ceux qui ont des défauts qui sont traités en interne par les bibliothèques JavaScript. Par exemple, jQuery ressemble à ceci:

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

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 caractères d'échappement HTML seront traités, alors que vous auriez à vous échapper vous-même si vous définissiez simplement innerHTML.

11
Andrew Hare

Vous pouvez obtenir le même effet en manipulant le DOM. Le moyen le plus sûr de modifier le texte consiste à 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 supprime le contenu textuel de votre élément avant de le remplacer par le nouveau texte.

La plupart des développeurs évitent d'utiliser innerHTML parce que l'accès aux éléments via le DOM est conforme aux normes.

7
Bill the Lizard

Si vous souhaitez uniquement modifier le texte brut, il existe une solution plus rapide qui repose sur des normes:

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

Quoi qu'il en soit, notez que innerHTML fera partie de la prochaine norme HTML 5.

6
Ionuț G. Stan

Simple. 

Remplacez text.innerHTML = 'two' par text.firstChild.nodeValue = 'two'.

5
BlackMagic
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 cela présente l'avantage de fonctionner dans certains cas (IE) où innerHTML ou appendChild ne fonctionne pas, comme certains nœuds de table, le texte des éléments de style et de script et la valeur des champs de formulaire

2
kennebec

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 quiconque le fait rarement mais utilise un cadre tel que jQuery ou Prototype ou tout autre cadre javascript sur là à la place. Voici un exemple:

<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>
1
Sergej Andrejev

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

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

Il me semble que la combinaison CSS + HTML + JS devrait produire les 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?

1
ilya n.

Également à la recherche d'une bonne alternative au contournement element.innerHTML, j'ai finalement 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 balises <template>, mais boucle à la place:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

Gardez à l'esprit que cette méthode "ajoute" du contenu lorsque innerHTML "remplace" du contenu ...

Cela peut aider:

HTMLElement.prototype.clearContent = function()
{
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

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

doc: https://github.com/swannty/escaping-innerHTML
perf: https://jsperf.com/escaping-innerhtml

1
user7674857

Je trouve parfois utile de stocker une référence directe au nœud de texte si je vais le mettre à jour régulièrement. Je fais quelque chose comme ça:

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

Et puis chaque fois que je dois le mettre à jour, je fais juste ceci:

dynamicText.nodeValue = "the updated text";

Cela évite de devoir parcourir le DOM, d’ajouter ou de supprimer des enfants.

0
Code83

insertAdjacentHTML () est la voie à suivre. En savoir plus: Cliquez pour documentation

0
Heals Legodi