• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

205
Views
¿Puedo copiar innerHTML para un div sin ignorar los espacios en blanco?

Estoy tratando de copiar un contenido div html a otro elemento como texto, pero cuando intento ignorar los espacios en blanco, ¿alguna idea de cómo se puede hacer eso?

aquí está mi código:

HTML

 <div id="parent"> <!-- Component: --> <div id="component" class=""> <p class="px-8 text-center py-2 bg-green-500 text-white dark:bg-green-50 dark:text-green-900 font-medium text-lg rounded-md hover:scale-105 hover:bg-green-100 "> Start Now </p> </div> <!-- Code: --> <div class="px-8 my-8"> <h1 class="text-white ">Code:</h1> <p class="text-white" id="code"></p> </div> </div>

JS

 const component = document.getElementById("component") const code = document.querySelector("#code") code.innerText=component.innerHTML

Lo que obtengo: Lo que obtengo

lo que quiero: lo que quiero

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

No es que se ignore el espacio en blanco, sino cómo el navegador muestra elementos particulares. Cada uno de los elementos HTML tiene sus propios estilos y características predefinidos, normalmente definidos a través de hojas de estilo de agente de usuario.

Dado que desea respetar el espacio en blanco, puede usar el atributo css white-space o cambiar #code a una etiqueta <pre> en lugar de una <p> (la desventaja es que aún tendrá que anular los estilos de navegador predeterminados).

 const comp = document.getElementById('component'); const original = document.getElementById('codeoriginal'); const code = document.getElementById('code'); const code2 = document.getElementById('code2'); original.innerText = comp.innerHTML; code.innerText = comp.innerHTML; code2.innerText = comp.innerHTML;
 #code { white-space: pre; }
 <div id="parent"> <!-- Component: --> <div id="component" class=""> <p class="px-8 text-center py-2 bg-green-500 text-white dark:bg-green-50 dark:text-green-900 font-medium text-lg rounded-md hover:scale-105 hover:bg-green-100 "> Start Now </p> </div> <!-- Code: --> <div class="px-8 my-8"> <h1 class="text-white ">Code: (Original)</h1> <p class="text-white" id="codeoriginal"></p> </div> <div class="px-8 my-8"> <h1 class="text-white ">Code: (CSS change)</h1> <p class="text-white" id="code"></p> </div> <div class="px-8 my-8"> <h1 class="text-white ">Code: (Using pre)</h1> <pre class="text-white" id="code2"></p> </div> </div>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error