DOM problème avec affichage de 2 balises

Sujet résolu

16 août 2010 à 16:07:54

salut les amis,j'ai lu le tuto sur Le DOM sur le site du zéro voilà le lien http://www.siteduzero.com/tutoriel-3-4552-le-dom.html j'ai suis la même chose que l'auteur pour ajouter des balises dynamiquement mais mon broser ne m'affiche rien,je ne sais pas ou est le problem.voila mon petit script:

function add-noeud()
{

var titre=document.createElement("h1");
if (document.all)
titre.className="personnalisation";
else
titre.setAttribute("class","personnalisation");

var lien=document.createElement("a");
lien.setAttribute("href","www.google.com");
var text_lien=document.createTextNode("Se renvoyer vers la page google.com");
lien.appendChild(text_lien);
titre.appendChild(lien);
var parent=document.getElementById("bloc1");
parent.insertBefore(titre,"h1");
}

et voilà le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="script.js">

</script>
<style type="text/css">
<!--
.personnalisation
{
color:#6666CC;
font-size:large;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<body>
<div id="bloc1">
<h1>Titre 1</h1>
</div>
<input type="button" value="AJouter un noeud" onclick="add-noeud()" />
</body>
</html>

je n'ai bien compris le tuto mais dans l'attente d'une réponse favorable je vais faire une recherche sur le DOM.
Merci d'avance

birdy42

16 août 2010 à 16:11:51

Est-ce que tu as une erreur dans la console d'erreurs ? (Outils > Console d'erreurs dans Firefox; Clic sur le petit triangle jaune en bas à gauche > Détails dans IE)

miclebowski

16 août 2010 à 16:25:51

Salut,

je vois 2 soucis : enlève le - du nom de ta fonction, ca fait bugger le script.

Sinon, dans insertBefore, le 2eme argument doit être un noeud : https://developer.mozilla.org/en/insertbefore (en rajoutant un id sur <h1> ca devrait rouler

)

Shivaan

16 août 2010 à 16:43:19

Et je ne suis pas convaincu qu'utiliser parent comme nom de variable soit judicieux. C'est un mot clé, et ça risque de porter à confusion.

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

Darkodam

16 août 2010 à 17:57:37

// Pas de signe "moins" dans les noms de variables/fonctions.
// Utilises plutôt la convention de nommage camelCase.
// http://fr.wikipedia.org/wiki/CamelCase
function addNoeud()
{
	// Prend l'habitude de déclarer (et initialiser si possible)
	// toutes tes variables en début de fonctions. Ça permet une
	// meilleure lisibilité.
	var titre = document.createElement("h1"),
		lien = document.createElement("a"),
		text_lien = document.createTextNode("Se renvoyer vers la page google.com"),
		parent = document.getElementById("bloc1");

	// document.all servait pour internet explorer 5.5
	// On arrive ajd bientôt à la version 9. Ce n'est 
	// plus la peine de se servir de ce test.
	// De plus, className est compatible avec tout les
	// navigateurs.
	titre.className="personnalisation";

	// Attention, l'attribut href doit commencer par
	// "http://" si tu veux que le lien redirige vers 
	// un site externe. Sinon tu auras des liens qui
	// ressembleront à "http://www.tonsite.fr/www.google.com"
	lien.setAttribute("href","http://www.google.com");
	lien.appendChild(text_lien);
	titre.appendChild(lien);

	// Le deuxième argument de insertBefore doit être
	// un noeud DOM (textNode, HTMLNode, etc...)
	// https://developer.mozilla.org/en/insertbefore
	parent.insertBefore(titre, parent.firstChild);
}

liens :
https://developer.mozilla.org/en/insertbefore
http://fr.wikipedia.org/wiki/CamelCase

ps: @Shivaan
parent n'est pas un mot réservé de javascript. Et félicitations pour ta promotion au rang de modérateur

.
https://developer.mozilla.org/en/JavaS [...] eserved_Words

stitox

18 août 2010 à 11:19:54

Je vous remercie pour votre aide.J'ai enfin trouver la réponse en recommençant le tuto doucement.
premièrement y a un problème avec le signe '-' il ne faut utiliser ce symbole

et deuxièment j'ai parent.firstChild par document.getElementsByTagName("h2")[0] et ça marché :lol:

Pour info comme il a dit Darkodam "Parent" n'est un mot réservé,on se qui console du FF je pense qu'il est inutile car il m'a rien affiché comme erreur :colere2:

function add_noeud()
{
	

var titre=document.createElement("h1");


var lien=document.createElement("a");
if (document.all)lien.className="personnalisation";
else lien.setAttribute("class","personnalisation");

lien.setAttribute("href","http://google.com");

var text_lien=document.createTextNode("Se renvoyer vers la page google.com");

lien.appendChild(text_lien);
titre.appendChild(lien);

var parent=document.getElementById("bloc1");
parent.insertBefore(titre,document.getElementsByTagName("h2")[0]);

}

J'ai trouvé une alternative c'est qu'on peut travailler directement avec les innerHTML et ça fonctionne bien :-°

voilà ma proposition :

function add_noeud()
{
document.getElementById("bloc1").innerHTML+="<h1><a href='http://www.google.com' class='personnalisation'>Se renvoyer vers la page google.com</a></h1>";
}

vous voyez comme c'est facile!!!!
Merci encore une fois pour votre réponses.

Darkodam

18 août 2010 à 21:46:40

Quand je vois que tu n'as rien pris des modifications (commentés!) que j'ai apporté à ton script, je me demande vraiment pourquoi je me suis pété le cul à écrire ce post.

Quand à innerHTML, oui ça à l'air plus facile, mais tu verras par toi-même (puisque tu n'écoutes pas les autres) que ça peut apporter plus d'ennuis que ça ne résout de problèmes.

Sur ce, bon vent!

stitox

22 août 2010 à 6:23:06

Après des recherches j'ai constaté que le innerHTML ne respecte pas les standards!!! donc merci pour l'aide à vous tous