如何通过一次单击从两个不同的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

1. 不要使用，因为它只支持单行文本，并将删除换行符<input>

2. 用于添加新行\n

3. 添加到以呈现换行符white-space:pre#thecopiedtext

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

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

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

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

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

  var contentTogether = previewHeader + "\n" + HiddenURLdiv;

  temp.val(contentTogether).select();

  document.execCommand("copy");

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

  temp.remove();

});

#HiddenURLdiv {

  display: none;

}

#thecopiedtext {

  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() {

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

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

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

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

    var contentTogether = `<div>${previewHeader}</div><div>${HiddenURLdiv}</div>`;

    temp.val(`${previewHeader}${HiddenURLdiv}`).select();

    document.execCommand("copy");

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

    temp.remove();

});

#HiddenURLdiv {

  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>