11521 sujets

JavaScript, DOM et API Web HTML5

Ajouter un élément avant chaque élément ciblé

Bonjour,

J'essaie actuellement de rajouter un élément avant chaque élément ciblé (une div avant chaque p), mais ça ne me le rajoute que sur le dernier élément ciblé (le dernier paragraphe).

    <div id="app">
      <p>The text above has been created dynamically.</p>
      <p>The text above has been created dynamically.</p>
      <p>The text above has been created dynamically.</p>
    </div>

      document.body.onload = addElement;

      function addElement() {
        // crée un nouvel élément div
        var newDiv = document.createElement("div");
        // et lui donne un peu de contenu
        var newContent = document.createTextNode("Hi there and greetings!");
        // ajoute le nœud texte au nouveau div créé
        newDiv.appendChild(newContent);

        // ajoute le nouvel élément créé et son contenu dans le DOM
        var parentDiv = document.getElementById("app");
        var currentDivs = document.getElementsByTagName("p");

        for (let currentDiv of currentDivs) {
          parentDiv.insertBefore(newDiv, currentDiv);
        }
      }


https://jsfiddle.net/MrSoul/gbc1do2a/

Quelqu'un saurait m'expliquer pourquoi ?

Cet exemple de code est basé sur : https://developer.mozilla.org/fr/docs/Web/API/Document/createElement je lui ai juste rajouter la boucle et ai placé les éléments cible dans un conteneur.

PS : Je suis un total débutant en JS, je freine des pieds depuis des années, mais cette lacune à un besoin urgent d'être comblé. Smiley smile
Modifié par MrSoul (03 May 2021 - 11:20)
Modérateur
Salut !

T'es pas loin il faut juste faire le create élément dans la boucle :
  for (let currentDiv of currentDivs) {
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode('---Textes rajoutés---');
    newDiv.appendChild(newContent);
	  parentDiv.insertBefore(newDiv, currentDiv);
  }

https://jsfiddle.net/undless/tdozLgs0/
Merci, ça fonctionne (ça ne fonctionne pas sur ton jsfiddle, problème de variables).

Sinon, le but de cet exercice est de faire de tous les paragraphes enfant d'une ID :
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>


La chose suivante (en sachant que les ID sont incrémentiels) :
<div id="3" class="paragraph">
    <div class="anchor"><a href="#3">#</a></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>    
</div>


Sans trop m'en dire (parce que j'aimerais le faire moi même), dans quel ordre il faut s'y prendre ?

Encore merci !
Modifié par MrSoul (03 May 2021 - 16:36)
Modérateur
MrSoul a écrit :
Merci, ça fonctionne (ça ne fonctionne pas sur ton jsfiddle, problème de variables).
Ah mer...credi effectivement je me suis emmêlé... voila la bonne Smiley lol https://jsfiddle.net/undless/tdozLgs0/

MrSoul a écrit :
Sinon, le but de cet exercice est de faire de tous les paragraphes enfant d'une ID :
&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/p&gt;

Ici ton paragraphe est déjà dans un ID spécifique ?

MrSoul a écrit :
La chose suivante (en sachant que les ID sont incrémentiels) :
&lt;div id="3" class="paragraph"&gt;
    &lt;div class="anchor"&gt;&lt;a href="#3"&gt;#&lt;/a&gt;&lt;/div&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/p&gt;    
&lt;/div&gt;


Sans trop m'en dire (parce que j'aimerais le faire moi même), dans quel ordre il faut s'y prendre ?

récupérer tout les <p> et dans la boucle ajouter ce qu'il faut à chaque <p> ou autour
Sujet clos
Aller à