Dom innerHTML : Comment insérer une balise span dans un div existant

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Dom innerHTML : Comment insérer une balise span dans un div existant

Message par Jpe54 » 10 mai 2020, 16:19

Bonjour,

Au départ je dispose d'un div contenant une balise canvas ajoutant au texte un trait de la couleur du tracé :

Code : Tout sélectionner

document.getElementById("EnteteCenter").innerHTML = 'Visualisation des trajets et des POIs<canvas id="CouleurTrace"></canvas>';
Lorsque j'utilise cet id pour afficher une autre information, je code - à tort ou à raison de cette manière pour conserver mon canvas - et le neutralise en utilisant la couleur de fond de page par défaut comme suit :

Code : Tout sélectionner

function Affiche_Canvas(couleur, afficher) {
…}
document.getElementById('EnteteCenter').firstChild.nodeValue = "Visualisation des trajets et des POIs"
Affiche_Canvas(false, false);
Cela fonctionne sans problème ni perte du canvas pour la suite.

Je souhaiterai aller plus loin et afficher un texte d'aide avec une police de caractère et couleur différente avec le css qui va bien. Pour cela je pensais pouvoir utiliser la balise span avec un id mais le texte de la balise span ne s'affiche pas, et il n'y a aucune d'erreur dans la console.

Sur ce type de codage je décroche et sollicite votre expertise !

Code : Tout sélectionner

// Soit le codage original dans lequel les balises span ne sont pas acceptées
document.getElementById('EnteteCenter').firstChild.nodeValue = "Relevé distance actif - Double clic = Autre distance || Echap 1 = Lire distance || Echap 2 = Stopper";
// Et que je pensais possible par insertion sous la forme :
// Caractères standard 20px sur id Entetecenter :
document.getElementById('EnteteCenter').innerHTML = "Relevé distance actif ";
// Caractère 10px pour le span id Style10 :
document.getElementById('EnteteCenter').innerHTML += "<span id='Style10' - Double clic = Autre distance || Echap 1 = Lire distance || Echap 2 = Stopper></span>";
Où se trouve ma bévue ?

Mes recherches m'ont amenées à ceci, mais ne vois pas comment l'adapter - en DOM - à mon cas en insèrent un span au lieu du second div …
https://developer.mozilla.org/fr/docs/W ... jacentHTML

Code : Tout sélectionner

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// Ici la nouvelle structure est :
// <div id="one">one</div><div id="two">two</div>
Il y a peut être plus simple. Merci de vos remarques !

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Dom innerHTML : Comment insérer une balise span dans un div existant

Message par webmaster » 11 mai 2020, 10:09

Bonjour,

Je ne comprends pas bien l'interet d'un canvas ici.
Pour afficher un element, il faut utiliser style.display="block" ou ="none" pour l'effacer.

Je suis un peu perplexe aussi avec le "firstChild.nodeValue"

Le plus simple pour afficher une bulle d'aide et d'ajouter le code HTML via innerHTML.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre