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.innerHTMLLo que obtengo: Lo que obtengo
lo que quiero: lo que quiero
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>