11521 sujets

JavaScript, DOM et API Web HTML5

Mettre un bouton avant chaque titre

Bonjour,
Je veux pouvoir ajouter un bouton devant chaque titre h2, h3 ou h4.
Voici le code d'essai que j'ai écrit :

titres = document.querySelectorAll('h2, h3, h4');	
bouton_avant_titre = document.createElement("button");
contenu_bouton_avant_titre = document.createTextNode("Bouton");
bouton_avant_titre.appendChild(contenu_bouton_avant_titre);

for (i=0; i < titres.length; i++) {
	document.body.insertBefore(bouton_avant_titre, titres[i]);
}

Or seul le premier titre est précédé d'un bouton.
Pourquoi ??
Où est l'erreur ??
Que faut-il faire pour que tous les titres soient précédés du bouton ?

Merci par avance de votre aide
Modifié par Beka (07 Sep 2018 - 13:29)
Tu crées un seul bouton pour tous les titres.
Il faut créer un bouton à chaque boucle.
'use strict'
const titres = document.querySelectorAll('h2, h3, h4');	
for (var i=0, iMax = titres.length; i<Imax; i++) {
        const bouton_avant_titre = document.createElement('BUTTON');
        bouton_avant_titre.textContent = 'Bouton';
        document.body.insertBefore(bouton_avant_titre, titres[i]);
}

Inutile de créer un textNode pour le titre du bouton. Utilise l'attribut textContent directement
Modifié par bazooka07 (07 Sep 2018 - 14:24)
Merci Bazooka de tes indications.

En fait, je devais partir et ai rédigé mon message un peu rapidement.

La raison pour laquelle j'ai appelé au secours, c'est que j'ai d'abord tout naturellement commencé à placer la création du bouton dans la boucle.
Voyant que seul le premier titre était précédé de son bouton, j'ai essayé de placer la création du bouton à l'extérieur de la boucle.
C'est ce deuxième essai que j'ai recopié dans mon message.

J'ai essayé ton code

titres = document.querySelectorAll('h2, h3, h4');
for (i=0; i < titres.length; i++) {
	const bouton_avant_titre = document.createElement('button');
	bouton_avant_titre.textContent = 'Bouton';
	document.body.insertBefore(bouton_avant_titre, titres[i]);
}

Le problème reste le même : seul le premier titre est précédé de son bouton. Smiley decu
Au temps pour moi : Le bouton doit être inséré dans le parent du titre et non dans le document.
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>J'ai des boutons</title>
	<style>
		body { max-width: 48rem; }
		h2, h3, h4 { display: inline-block; margin: 0; }
		button {margin-right: 1rem; }
		div { border: 1px solid blue; padding: 0.3rem 1rem; margin-top: 0.5rem; }
	</style>
</head><body>
	<div>
		<h2>Titre 1</h2>
	</div>
	<div>
		<div>
			<h3>Titre 1.1</h3>
		</div>
		<div>
			<div>
				<h4>Titre 1.1.1</h4>
			</div>
			<div>Blabla...</div>
			<div>
				<h4>Titre 1.1.2</h4>
			</div>
			<div>Blabla...</div>
		</div>

		<div>
			<h3>Titre 1.2</h3>
		</div>
		<div>
			<div>
				<h4>Titre 1.2.1</h4>
			</div>
			<div>Blabla...</div>
			<div>
				<h4>Titre 1.2.2</h4>
			</div>
			<div>Blabla...</div>
		</div>
	</div>
	<script>
		(function() {
			'use strict';
			const titres = document.querySelectorAll('h2, h3, h4');
			for(var i=0, iMax=titres.length; i<iMax; i++) {
				const btn = document.createElement('BUTTON');
				btn.textContent = 'Bouton';
				titres[i].parentElement.insertBefore(btn, titres[i]);
			}
		})();
	</script>
</body></html>
Meilleure solution
Bonjour Bazooka,

Merci pour le rectificatif.
Effectivement, ça marche maintenant.

Mais il n'est pas forcément nécessaire de placer les titres h2 dans un div dans la mesure où le parent d'un titre h2 est body.

Mes documents seront construits selon la structure

<h2>...</h2>
<section>
     <h3>...</h3>
     <section>
         <h4>...</h4>
         <section>...</section>
     </section>
</section>

pour laquelle le code que tu proposes marche parfaitement.

Je suis désolé de t'avoir donné des boutons et espère qu'ils ne te gratteront pas trop. Smiley smile

Bonne journée.
Sujet clos
Aller à