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

**VertoDebru** · 29/05/2021, 11h47

Ton problème viens du code HTML

en faisant comme c de mon coté ca fonctionne :

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title></title>
        <link rel="stylesheet" type="text/css" href="../css/style.css">
        <script type="text/javascript" src="../js/script.js"></script>
</head>
 
<body onload="test()">
    <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>
                        <ul id="columns_menu">
                        <li><img src="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>
</body>
</html>

Code JS :

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
 
    function test()
    {
    const ELEMENTLI = document.createElement('li');
    const IMAGE = document.createElement('img');
    const INPUT = document.createElement('input');
 
    IMAGE.setAttribute('src', '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);
    ELEMENTLI.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]);
    });
    }

Invité · 29/05/2021, 12h00

Merci bien

Remplacer un élément par un autre

JavaScript

Discussions similaires

Partager

Partager