Injecter du HTML si une balise est présente dans la page ?

Bonjour, je poste ce essage pour faire suite à ce topic posté dans la zone css du forum.

Bloug se demandait comment il était possible de créer un "cadre" arrondis en coin autour d'éléments liens de type a:hover. Pour ma part je me pose la même question concernant des titres de niveau h1.

Une des solutions proposées était de reprendre tous les liens de la page en leur assignant un span supplémentaire dans le code html pour pouvoir gérer cet aspect de double background image. L'idée semble séduisante en effet, seulement le CMS sur lequel je travaille est trop toufu et mes délais trop serrés pour que je puisse me permettre de reprendre une à une toutes les pages pouvant contenir du h1 potentiel pour y adjoindre une span.

D'où ma question, peut être un peu newbièsque j'en conviens :

je me demandais si en JS ca pouvait être jouable. Autant je sais que l'on peut influer sur le CSS et l'enrichir aubesoin, que rajouter en passant un tronçon de HTML dans une page si un autre tronçon bien précis est détecté, ça je sais pas.

Mon cerveau est en pleine panne EDF là, quelqu'un peut m'éclairer ?

Encore un gros Merci à tous et bonne journée//bon code à vous !

Hello,

Il est tout à fait possible de rajouter des éléments dans une page html à coup de .innerHTML ou mieux, de document.createElement("span") et obj.appendChild() ou obj.insertBefore().

En bref, c'est possible, à toi de voir comment faire dans ton cas précis

Pile poil

Merci pour le tuyau. Je scriptouillerai tout ça et je posterai le code quand ce sera opérationnel.

Bon week end à tous.

Bonjour

Bon alors je me suis penché comme convenu sur ce que tu m'as proposé, et après études des différentes méthodes, j'ai finit par pondre ceci :

function decotitre() {
	var titre = document.getElementsByTagName("h1");
		var num = titre.length;
		alert("Il y a " + num + " éléments <h1> dans ce document.");
	var deco = titre.appendChild(document.createElement("span"));
	var plop = deco.setAttribute("class", "decoh1");
}
document.onload = decotitre();

Jusque là tout va bien. Le petit traditionnel getElementByTagName histoire de récupérer les titres de ma page, plus les traitements derrière pour :
1- créer le span qu'il me fallait,
2- l'ajouter au DOM, dans la liste des childNodes de mon titre
et 3- lui coller la classe CSS qui va bien pour créer mon dernier arrondis.

Je teste... et plouf ! Erreur : titre.appendChild n'est pas une fonction ! Ah bon ? Et c'est quoi alors ?

Donc là par acquis de conscience je reprends le tout, je bidouille le petit alert() en début de script et je relance , pour découvrir que "Il y a 0 éléments <h1> dans ce document" alors que très précisément il y en a un (si, si je vous jure ! ) puisque c'est justement là tout l'intérêt de la chose !

Là je ne comprend pas tout ce qui se passe dedans ma machine encore...

Quelqu'un voit où je pourrais m'être lamentablement gaufré
ou alors le script ne fonctionne t'il que si je fais la danse du ventre, nu devant mon PC sous la pleine lune du solstice d'hiver ?

En tout cas, merci une fois encore pour les coups de pattes passés et à venir

Bonne journée à tous.
Modifié par Zzz. (16 Oct 2007 - 15:57)

Hehe,


Alors, plusieurs problèmes

Déjà, tu écrit :

document.onload = decotitre();

alors que c'est

document.onload = decotitre;

Sans les (), donc. Si tu mets les (), cela signifie que tu execute decotitre() et que tu attribue le retour de cette fonction à document.onload.
Donc decotitre va etre executé dès que cette ligne apparaitra dans ta page web, c'est à dire... avant que ton code HTML ne soit interprété et donc... avant que tes balises <h1> ne soient écrites ! Voila pourquoi il n'en trouve pas !

Si tu enleve les (), cela signifie que la fonction document.onload devient decotitre, donc une fois la page chargée, decotitre sera executé.

Ensuite !
getElementsByTagName retourne un tableau d'éléments, titre.appendChild() ne peut donc pas marcher, titre étant un array, et appendChild étant une méthode des HTMLElements ^^
Pour cibler ton premier <h1>, c'est titre[0].appendChild() qu'il faut utiliser.
Et pour cibler tout tes h1, il te faudra recourir à une boucle qui parcourt tout ton tableau.

Et pour finir

var plop = deco.setAttribute("class", "decoh1");

le var plop = au début est inutile à mon avis, tu peux tout simplement écrire deco.setAttribute("class", "decoh1") pour attribuer le style à deco.

Voila, en tout cas, c'est agréable d'avoir de répondre à des questions posées avec autant d'humour

Edit : La remarque de Julien Royer en dessous est tout à fait juste
Modifié par Tymlis (16 Oct 2007 - 17:56)

Hello !

En fait, il faut écrire

window.onload = decotitre;

plutôt que

document.onload = decotitre;

qui ne marchera que sur Opera, à ma connaissance.

Merci les gars ! Effectivement, ca roule déjà mieux comme ça. Tant pis pour mon pc qui ne me verra peut être pas nu finalement

En gros, suite à application de vos conseils, l'erreur a disparu. Cependant, me reste la création du <span> qui semble vouloir me tenir tête mais après réflexion je me demande si ca ne provient pas d'ailleurs : Il me semble avoir lu quelque part que lorsque plusieurs scripts appelent en même temps la fonction .onload, ca pouvait provoquer quelques bugs. Je vais chercher de ce côté là. J'ai d'autres JS dans le site, c'est peut être un de ceux là un qui me fout la pagaille .

*prend son vieux tromblon et par en chasse dans la forêt de fichers...*

a écrit :

Hello !
En fait, il faut écrire
window.onload = decotitre;
plutôt que
document.onload = decotitre;
qui ne marchera que sur Opera, à ma connaissance.

Bien vu Julien, à chaque fois j'y pense mais je me gourre avec ces 2 là.

En tout cas merci encore à vous 2

Effectivement, si tu a défini à plusieurs endroit des

window.onload = truc;
window.onload = machin;
window.onload = bidule;

Alors seul le dernier sera executé.

Si tu veux tous les executer, il va falloir mettre tout ça dans une seule fonction

window.onload = function() {
truc();
machin();
bidule();
}

Attention toutefois, ton erreur ne vient peut-être pas de là. Lorsque tu fais titre[0].appendChild(document.createElement("span")), tu ajoute un <span> dans le <h1>, mais à la fin.

Si j'ai bien compris ce que tu veux faire, c'est :
Etat initial :

<h1>Titre</h1>

Etat final :

<h1><span class="decoh1">Titre</span></h1>

Or, avec le code actuel, tu va plutot obtenir :

<h1>Titre<span class="decoh1"></span></h1>

Essaie plutot quelque chose du genre

titre[0].innerHTML = '<span class="decoh1">'+titre[0].innerHTML+'</span>';

C'est certes moins élégant que de jouer avec les createElement / appendChild / insertBefore / removeChild mais c'est drolement plus rapide et lisible ^^

Edit : L'extension Web Developer pour Firefox a une option permettant de voir le code source généré après passage du javascript qui est trés pratique pour voir ce qu'il s'est reellement passé.
Modifié par Tymlis (16 Oct 2007 - 19:27)

Tymlis a écrit :
Effectivement, si tu a défini à plusieurs endroit des

window.onload = truc;
window.onload = machin;
window.onload = bidule;

Alors seul le dernier sera executé.

Si tu veux tous les executer, il va falloir mettre tout ça dans une seule fonction

window.onload = function() {
truc();
machin();
bidule();
}

Yes ca c'est Funky Merci encore l'ami !

Tymlis a écrit :

Attention toutefois, ton erreur ne vient peut-être pas de là. Lorsque tu fais titre[0].appendChild(document.createElement("span")), tu ajoute un <span> dans le <h1>, mais à la fin.

Si j'ai bien compris ce que tu veux faire, c'est :
Etat initial :

<h1>Titre</h1>

Etat final :

<h1><span class="decoh1">Titre</span></h1>

Tout juste

Tymlis a écrit :
Or, avec le code actuel, tu va plutot obtenir :

<h1>Titre<span class="decoh1"></span></h1>

Ben en fait, même ca je ne l'obtiens pas

Tymlis a écrit :

Essaie plutot quelque chose du genre

titre[0].innerHTML = '<span class="decoh1">'+titre[0].innerHTML+'</span>';

C'est certes moins élégant que de jouer avec les createElement / appendChild / insertBefore / removeChild mais c'est drolement plus rapide et lisible ^^

Ca a l'air surtout vachement plus rapide ouais ! Après moi tant que ca marche je ne suis pas trop regardant non plus hein !

Tymlis a écrit :

Edit : L'extension Web Developer pour Firefox a une option permettant de voir le code source généré après passage du javascript qui est trés pratique pour voir ce qu'il s'est reellement passé.

Ah ok ! Je voyais pas trop la différence entre cette option et celle qui classiquement affiche la source de la page.

Bon quoi qu'il en soit, là je ne suis plus au boulot donc je remettrai le nez dedans demain et j'enverrai un feedback

En tout cas, c'est un honneur de bosser avec toi, tu viens de gagner une place ds la liste de remerciements de mon rapport de stage