Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

139
Vistas
Switch paragraphs using inner HTML in JS

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>"
});
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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>

about 4 years ago · Juan Pablo Isaza Denunciar

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
about 4 years ago · Juan Pablo Isaza Denunciar

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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda