Switch paragraphs using inner HTML in JS

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

It's not clear what "switch" means. You want to change their positons as siblings ? In your code you are trying to nest the elements inside each others not switching them. — Cesare Polonara
– Cesare Polonara, Commented May 20, 2022 at 11:00

VMT · Accepted Answer · 2022-05-20 11:07:24Z

2

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>

answered May 20, 2022 at 11:07

VMT

8091 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Vincenzo Traina · Accepted Answer · 2022-05-20 11:16:13Z

0

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>

edited May 20, 2022 at 11:16

answered May 20, 2022 at 11:08

Christian Vincenzo Traina

10.6k4 gold badges46 silver badges79 bronze badges

6 Comments

Sophia Koulen Over a year ago

"The use of innerHTML would not preserve listeners and have worse performances" Are you sure about that? I'd say it is quite the opposite. InnerHTML preserves listeners while cloning the nodes will remove them.

Christian Vincenzo Traina Over a year ago

Yes, innerHTML is just HTML under the form of text, so if there's a listener in your JS it will get lost after innerHTML. Also, if you use innerHTML the browser will need to parse the text in order to create the internal objects, those internal objects are already there when you just re-use an object. I know that in my snippet I used cloneNode(true), but I'm sure that also cloning is faster than re-parsing :)

Sophia Koulen Over a year ago

elem1.replaceWith(elem2.cloneNode(true)); elem2.replaceWith(elem1.cloneNode(true)); don't you need to use a temp object to put the value of elem1 in it? I think now both element will have the same value.

Sophia Koulen Over a year ago

If you really want to just switch the order of the paragraphs, why not just use CSS for even better performance since then no reconstructing of the DOM will be needed?

Sophia Koulen Over a year ago

And what about textContent then? From what i understood, this question is just about swapping text, so no need to worry about listeners.

|

Lee Taylor · Accepted Answer · 2022-05-20 20:36:06Z

0

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

edited May 20, 2022 at 20:36

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered May 20, 2022 at 11:07

Wojtanello

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

Switch paragraphs using inner HTML in JS

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related