我可以使用 JavaScript .value 属性将数据从一个 div 复制到另一个 div 吗?

Question

我对 JS 很陌生，我想做的只是使用 JS 将数据从一个div 复制到另一个div，但我得到未定义的错误

<div id="div_one">Hello</div>
<div id="div_two"></div>
<script>
document.getElementById("div_two").innerHTML = 
document.getElementById("div_one").value;
</script>

Answer 1

您需要获取innerHTML属性来获取值。

value仅适用于某些元素，如<button>、<option>、<input>、<li>、<meter>、<progress>、<param>。

document.getElementById("div_two").innerHTML =
document.getElementById("div_one").innerHTML;

<div id="div_one">Hello</div>
<div id="div_two"></div>

Answer 2

根据innerHTMLMDN：

注： 如果<div>、<span>或<noembed>节点具有包含字符 (&)、(<) 或 (>) 的子文本节点，innerHTML分别以&amp、&lt和&gt的形式返回这些字符。使用Node.textContent获取这些文本节点内容的正确副本。

• textContent通常具有更好的性能，因为文本不会解析为 HTML。
• 此外，使用textContent可以防止XSS攻击。

从这个意义上说，您也可以尝试其他属性：

let div1IH = document.getElementById("div_one").innerHTML;
console.log(div1IH);
let div1TC = document.getElementById("div_one").textContent;
console.log(div1TC);
let div1IT = document.getElementById("div_one").innerText;
console.log(div1IT);
document.getElementById("div_two").innerHTML = div1IH;
document.getElementById("div_three").innerHTML = div1TC;
document.getElementById("div_four").innerHTML = div1IT;

<div id="div_one">Hello & > _ < & </div>
<div id="div_two"></div>
<div id="div_three"></div>
<div id="div_four"></div>

由于在这种情况下您可能希望复制 HTML 内容，因此innerHTML可能就足够了，但如果打算仅将该数据用作文本，则可能更喜欢上面的替代属性。