JS中使用内部HTML切换段落

Question

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>"
});

Answer 1

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>

Answer 2

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

Answer 3

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>