I am trying to switch two paragraphs after clicking the button but I am stuck. Is there any way how to do this using inner HTML without using IF or boolean? I tried this code but it doesn’t work. Thanks
JavaScript
x
9
1
let elmsButton = document.querySelectorAll("button")[0];
2
let elmsParagraf1 = document.querySelectorAll(".prvni")[0];
3
let elmsParagraf2 = document.querySelectorAll(".druhy")[0];
4
5
elmsButton.addEventListener("click", () => {
6
elmsParagraf1.innerHTML = "<div class='druhy'></div>"
7
elmsParagraf2.innerHTML = "<div class='prvni'></div>"
8
});
9
Advertisement
Answer
Why don’t you use querySelector
in place of using querySelectorAll
and choose the first element?
By the way, I advise to delete and re-add the elements from the parent rather than using innerHTML
. The use of innerHTML
would not preserve listeners and have worse performances:
JavaScript
1
18
18
1
let elmsButton = document.querySelector("button");
2
let elmsParagraf1 = document.querySelector(".prvni");
3
let elmsParagraf2 = document.querySelector(".druhy");
4
5
elmsButton.addEventListener("click", () => {
6
swapElements(elmsParagraf1, elmsParagraf2);
7
});
8
9
function swapElements(elem1, elem2) {
10
// Check if siblings
11
if (elem1.parentElement !== elem2.parentElement) {
12
console.error('No sibling elements!');
13
return;
14
}
15
elem1.replaceWith(elem2.cloneNode(true));
16
elem2.replaceWith(elem1.cloneNode(true));
17
}
18
Example:
JavaScript
1
17
17
1
let elmsButton = document.querySelector("button");
2
3
elmsButton.addEventListener("click", () => {
4
let elmsParagraf1 = document.querySelector(".prvni");
5
let elmsParagraf2 = document.querySelector(".druhy");
6
swapElements(elmsParagraf1, elmsParagraf2);
7
});
8
9
function swapElements(elem1, elem2) {
10
// Check if siblings
11
if (elem1.parentElement !== elem2.parentElement) {
12
console.error('No sibling elements!');
13
return;
14
}
15
elem1.replaceWith(elem2.cloneNode(true));
16
elem2.replaceWith(elem1.cloneNode(true));
17
}
JavaScript
1
4
1
<button>Click me</button>
2
3
<div class="prvni">I am the first div</div>
4
<div class="druhy">I am the second div</div>