Remplacer un élément par un autre
Bonjour, Voici mon code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<div id="columns">
<div class="columns">
<div class="columns_title">
<h1>titre1</h1>
</div>
<nav>
<ul class="columns_menu">
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
<li><a href="#">lien5</a></li>
</ul>
</nav>
</div>
<nav>
<ul id="columns_menu">
<li><img src="../images/search.png" width="32" height="32"></li>
<li><a href="#">lien6</a></li>
<li><a href="#">lien7</a></li>
<li><a href="#">lien8</a></li>
</ul>
</nav>
</div>
</header>
</div>
<script type="text/javascript" src="../js/script.js"></script>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| const ELEMENTLI = document.createElement('li');
const IMAGE = document.createElement('img');
const INPUT = document.createElement('input');
IMAGE.setAttribute('src', '../images/search.png');
IMAGE.setAttribute('width', '32');
IMAGE.setAttribute('height', '32');
INPUT.setAttribute('type', 'text');
INPUT.setAttribute('id', 'texte');
INPUT.setAttribute('name', 'texte_form');
ELEMENTLI.appendChild(IMAGE);
IMAGE.appendChild(INPUT);
const ELEMENTUL = document.querySelectorAll("ul");
const ELEMENTLI1 = document.querySelectorAll('li');
const IMG = document.querySelectorAll('img');
IMG[0].addEventListener('click', function() {
ELEMENTUL[1].replaceChild(ELEMENTLI, ELEMENTLI1[5]);
}); |
Quand je clique sur l'image, rien ne fonctionne. Par contre quand je mets ELEMENTUL[1].replaceChild(ELEMENTLI, ELEMENTLI1[6]);
Le lien d'à côté est remplacé par l'image sans l'élément input.
Besoin d'aide, merci d'avance
