Switch paragraphs using inner HTML in JS

user_19160714 0
Viewed 43

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

let elmsButton = document.querySelectorAll("button")[0];
let elmsParagraf1 = document.querySelectorAll(".prvni")[0];
let elmsParagraf2 = document.querySelectorAll(".druhy")[0];

elmsButton.addEventListener("click", () => {
    elmsParagraf1.innerHTML = "<div class='druhy'></div>"
    elmsParagraf2.innerHTML = "<div class='prvni'></div>"
});
javascript
3 Answers

Assign each DOM.innerHTML of paragraph to a variable then swap them like below example:

let elmsButton = document.querySelectorAll("button")[0];
let elmsParagraf1 = document.querySelectorAll(".prvni")[0];
let elmsParagraf2 = document.querySelectorAll(".druhy")[0];

elmsButton.addEventListener("click", () => {
    const p1 =  elmsParagraf1.innerHTML;
    const p2 =  elmsParagraf2.innerHTML
    elmsParagraf1.innerHTML = p2;
    elmsParagraf2.innerHTML = p1
});
<button>Click</button>
<div class='prvni'>Paragraph 1</div>
<div class='druhy'>Paragraph 2</div>

user_191174010

You can switch those two divs by creating a temporary variable that holds Paragraf1 and then change Paragraf1 to Paragraf2 and vice versa, but with the variable.

    let temp = elmsParagraf1.innerHTML;
    elmsParagraf1.innerHTML = elmsParagraf2.innerHTML
    elmsParagraf2.innerHTML = temp
user_191602840

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:

let elmsButton = document.querySelector("button");
let elmsParagraf1 = document.querySelector(".prvni");
let elmsParagraf2 = document.querySelector(".druhy");

elmsButton.addEventListener("click", () => {
    swapElements(elmsParagraf1, elmsParagraf2);
});

function swapElements(elem1, elem2) {
  // Check if siblings
  if (elem1.parentElement !== elem2.parentElement) {
    console.error('No sibling elements!');
    return;
  }
  elem1.replaceWith(elem2.cloneNode(true));
  elem2.replaceWith(elem1.cloneNode(true));
}

Example:

let elmsButton = document.querySelector("button");

elmsButton.addEventListener("click", () => {
    let elmsParagraf1 = document.querySelector(".prvni");
    let elmsParagraf2 = document.querySelector(".druhy");
    swapElements(elmsParagraf1, elmsParagraf2);
});

function swapElements(elem1, elem2) {
  // Check if siblings
  if (elem1.parentElement !== elem2.parentElement) {
    console.error('No sibling elements!');
    return;
  }
  elem1.replaceWith(elem2.cloneNode(true));
  elem2.replaceWith(elem1.cloneNode(true));
}
<button>Click me</button>

<div class="prvni">I am the first div</div>
<div class="druhy">I am the second div</div>

user_18508510
Related