Pour l'ensemble des questions, le  HTML du body sera :

 <section class="part">section 1</section>

 <section class="part"><em>second </em> section 2</section>

 <H1>Mon site </H1>

 <section id="dernier"> dernière section</section>

 <!-- voici le HTML -->

Partie I

Donner le code pour créer un lien vers le haut de la page (body) insérer en début de chaque section

--------

let tmpArticles = document.body.querySelectorAll("section");

for (let i = 0; i < tmpArticles.length; i++) {

  let childEl = document.createElement("a");

  childEl.className = "tmpExample";

  childEl.href = "#";

  let txtNode = document.createTextNode("Haut Page");

  childEl.appendChild(txtNode);

  tmpArticles[i].appendChild(childEl);

}

ou

let tmpSections = document.querySelectorAll('article');
for ( let el of tmpSections) {
   el.insertAdjacentHTML('afterbegin',`<a href="#tmpDialogueExample"> top </a>`)
}

Partie II

1. Dessinez le résultat si l'on applique les règles CSS

h1 ~ #dernier { border-left : 1px solid black}

section:nth-child(n+3)  { border-bottom : 1px solid black}

section:last-child { border-right : 1px solid black}

section:not(.part) { border-top : 1px solid black}

2. Quelle formule ne donne pas l'id = "dernier" ?

1. document.querySelectorAll("#dernier")[0]
2. document.querySelectorAll('body > section:nth-of-type(3)')
3. document.querySelector('section+section~section')
4. document.querySelector('section+section').nextElementSibling
5. document.body.lastChild.previousElementSibling
6. document.body.lastElementChild
7. document.body.getElementById("#dernier")

d : selectionne h1

g : #dernier pas de #

3. Comment obtenir  le html suivant ?

 <section class="part"><em>second </em> section 2</section>

 <H1>Mon site </H1>

 <section id="dernier"> dernière section</section>

 <section class="part">section 1</section>

 <!-- voici le HTML -->

8. dernier.insertAdjacentElement("afterend",document.querySelector("section"));
9. let section =document.querySelectorAll[0] ; dernier.insertAdjacentElement("afterend",section) ;
10. let section =document.querySelectorAll("section")[0]; document.body.insertAdjacentElement("beforeend",section) ;

solution a

b : queryselector sans parametre

c  :

4. Comment obtenir  le html suivant ?

 <section class="part">section 1</section>

 <section class="part"><em>second </em> section 2</section>

 <H1>Mon site </H1>

 <section id="dernier"> dernière section</section>

 <!-- voici le HTML -->

<section>ici</section>

11. let s = document.createElement("section"); s.appendChild(document.createTextNode("ici")); document.body.prepend(s);
12. let s=document.createElement("section") ; body.beforeEnd(s);s.textContent="ici";
13. let s = document.createElement("section"); s.textContent ="ici"; document.body.append(s);
14. let s = document.createElement("section"); s.innerHTML ="ici"; document.body.append(s);
15.  let s = document.createElement("<section>ici</section>"); document.body.prepend(s);
16. let s = document.createTextNode("<section>ici</section>"); document.body.prepend(s);

c et d

Partie III Compléter le code pour avoir :

solution

Proposer une seconde écriture de la grille pour obtenir le même résultat.