如何通过一次单击从两个不同的div（其中一个隐藏）复制内容，但每个div都在单独的行上？

Question

我从plumwd找到了这个很棒的代码，我真的很喜欢它，因为它的简单性，并且因为其中一个div是隐藏的，但不幸的是，它将两个内容复制到一行中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style> #HiddenURLdiv {display: none;}</style>

<div id="PreviewHeader">Hello stuff is here</div>

<div id="HiddenURLdiv">This one is hidden</div>

<a href="#" id="copystuff">Copy Stuff</a>

<div id="thecopiedtext"></div>

<script>

    $("#copystuff").click(function() {

    var temp = $("<input>");

    $("body").append(temp);

    var previewHeader = $("#PreviewHeader").text();

    var HiddenURLdiv = $("#HiddenURLdiv").text();

    var contentTogether = previewHeader + " " + HiddenURLdiv;

    temp.val(contentTogether).select();

    document.execCommand("copy");

    $("#thecopiedtext").text(contentTogether);

    temp.remove();

});

</script>

我已经尝试了所有我知道的断行方法，希望将每个div内容放在单独的行上，但似乎没有任何效果。

我相信你们中的许多人都知道如何使这个脚本将每个div内容复制到单独的行上，同时保持其中一个div的隐藏。

Answer 1

不要使用，因为它只支持单行文本，并将删除换行符<input>用于添加新行\n添加到以呈现换行符white-space:pre#thecopiedtext$("#copystuff").click(function() {&nbsp; var temp = $("<textarea>");&nbsp; $("body").append(temp);&nbsp; var previewHeader = $("#PreviewHeader").text();&nbsp; var HiddenURLdiv = $("#HiddenURLdiv").text();&nbsp; var contentTogether = previewHeader + "\n" + HiddenURLdiv;&nbsp; temp.val(contentTogether).select();&nbsp; document.execCommand("copy");&nbsp; $("#thecopiedtext").text(contentTogether);&nbsp; temp.remove();});#HiddenURLdiv {&nbsp; display: none;}#thecopiedtext {&nbsp; white-space: pre;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="PreviewHeader">Hello stuff is here</div><div id="HiddenURLdiv">This one is hidden</div><a href="#" id="copystuff">Copy Stuff</a><div id="thecopiedtext"></div>

Answer 2

如注释中所述，您可以将两者联系，另外，您应该使用或者您可以将两个元素包装在（或任何显示块标签，如）标签中，因为默认情况下具有：<br />.html()<div><p><div>display:block$("#copystuff").click(function() {&nbsp; &nbsp; var temp = $("<input>");&nbsp; &nbsp; $("body").append(temp);&nbsp; &nbsp; var previewHeader = $("#PreviewHeader").text();&nbsp; &nbsp; var HiddenURLdiv = $("#HiddenURLdiv").text();&nbsp; &nbsp; var contentTogether = `<div>${previewHeader}</div><div>${HiddenURLdiv}</div>`;&nbsp; &nbsp; temp.val(`${previewHeader}${HiddenURLdiv}`).select();&nbsp; &nbsp; document.execCommand("copy");&nbsp; &nbsp; $("#thecopiedtext").html(contentTogether);&nbsp; &nbsp; temp.remove();});#HiddenURLdiv {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="PreviewHeader">Hello stuff is here</div><div id="HiddenURLdiv">This one is hidden</div><a href="#" id="copystuff">Copy Stuff</a><div id="thecopiedtext"></div>