我可以在不忽略空格的情况下复制 div 的 innerHTML 吗?
Can I copy innerHTML for a div without ignoring white spaces?
我正在尝试将 div html 内容作为文本复制到另一个元素,但是当我尝试这样做时它忽略了空格,知道如何做到这一点吗?
这是我的代码:
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
我得到的:
What I get
我想要的:
what I want
并不是空白被忽略了,而是浏览器如何显示特定元素。 HTML 每个元素都有自己的预定义样式和特征,通常通过用户代理样式表定义。
鉴于您想要尊重空格,您可以使用 css 属性 white-space
或将 #code
更改为 <pre>
标记而不是 <p>
(缺点是您仍然需要覆盖默认浏览器样式)。
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>
我正在尝试将 div html 内容作为文本复制到另一个元素,但是当我尝试这样做时它忽略了空格,知道如何做到这一点吗?
这是我的代码:
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
我得到的: What I get
我想要的: what I want
并不是空白被忽略了,而是浏览器如何显示特定元素。 HTML 每个元素都有自己的预定义样式和特征,通常通过用户代理样式表定义。
鉴于您想要尊重空格,您可以使用 css 属性 white-space
或将 #code
更改为 <pre>
标记而不是 <p>
(缺点是您仍然需要覆盖默认浏览器样式)。
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>