Remplacer un élément par un autre

Invité · 26/05/2021, 17h06

Bonjour, Voici mon code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Remplacer un élément par un autre

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager