Créer et ajouter un élément

Version imprimable

Code:

1
2
3
4
5
6
7
8
9
10
<nav>
   <ul class="columns_menu">
        <li><img src="../images/search.png" width="32" height="32"></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
   </ul>
</nav>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var li = document.createElement('li');
var text = document.createTextNode("Hello World");
 
li.appendChild(text);
 
var image = document.querySelectorAll('img');
var avant = document.querySelectorAll('li');
 
image[0].addEventListener('click', function() {
 
   document.body.insertBefore(li, avant[0]);
 
});

Bonjour, chez moi le script ne fonctionne pas. Besoin d'aide, merci d'avance.

25/05/2021, 17h38
ProgElecT

Citation:

Envoyé par ab1011

... chez moi le script ne fonctionne pas. ....

Un peu/beaucoup jeune comme indication, de plus il nous manque la partie CSS/style (si c'est là que sa ne fonctionne pas)

insertBefore doit être appliquée sur le parent du nouvel élément, ici <ul> et non <body>.

Cela donnerait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="module">
    var li = document.createElement('li');
    var text = document.createTextNode("Hello World");
    li.appendChild(text);
 
    var image = document.querySelectorAll('img');
    var avant = document.querySelectorAll('li');
 
    image[0].addEventListener('click', function () {
        document.getElementsByTagName("ul")[0].insertBefore(li, avant[0]);
    });
</script>
<nav>
    <ul class="columns_menu">
        <li><img src="../images/search.png" width="32" height="32"></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>

25/05/2021, 18h38
Invité

Merci beaucoup, ça marche.