Javascript 如何从两个不同的div'；s（其中一个隐藏），只需单击一次，但每一个都在单独的行上？

我从中找到了，我非常喜欢它，因为它很简单，而且其中一个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>

#HiddenURLdiv{display:none；}
你好，东西来了
这个是隐藏的
$（“#copystuff”）。单击（函数（）{
变量温度=$（“”）；
$（“正文”）。附加（临时）；
var previewHeader=$（“#previewHeader”）.text（）；
var HiddenURLdiv=$（“#HiddenURLdiv”）.text（）；
var contentTogether=previewHeader+“”+HiddenURLdiv；
temp.val（contentTogether.select（）；
文件。执行命令（“副本”）；
$（“#copiedtext”）.text（contentTogether）；
移除温度（）；
});

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

---

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

如评论中所述，您可以让这两个div与

联系，此外，您应该使用

.html（）

或者您可以将两个元素包装在

中（或任何显示块标记，如

）标记，因为默认情况下

具有

display:block

：

$（“#copystuff”）。单击（函数（）{
变量温度=$（“”）；
$（“正文”）。附加（临时）；
var previewHeader=$（“#previewHeader”）.text（）；
var HiddenURLdiv=$（“#HiddenURLdiv”）.text（）；
var contentTogether=`${previewHeader}${HiddenURLdiv}`；
temp.val（`${previewHeader}${HiddenURLdiv}`）。select（）；
文件。执行命令（“副本”）；
$（“#copiedtext”）.html（contentTogether）；
移除温度（）；
})；

#HiddenURLdiv{
显示：无；
}

你好，东西来了
这个是隐藏的

不要使用

，因为它只支持单行文本，并且会删除换行符

使用

\n

添加新行

将

空白：pre

添加到

#copiedtext

以渲染换行符

$（“#copystuff”）。单击（函数（）{
变量温度=$（“”）；
$（“正文”）。附加（临时）；
var previewHeader=$（“#previewHeader”）.text（）；
var HiddenURLdiv=$（“#HiddenURLdiv”）.text（）；
var contentTogether=previewHeader+“\n”+HiddenURLdiv；
temp.val（contentTogether.select（）；
文件。执行命令（“副本”）；
$（“#copiedtext”）.text（contentTogether）；
移除温度（）；
})；

#HiddenURLdiv{
显示：无；
}
#抄本{
空白：预处理；
}

你好，东西来了
这个是隐藏的

Not var contentTogether=previewHeader+“
”+HiddenURLdiv；？这是我的第一个选择。它不起作用。你想用这个

document.execCommand（“copy”）；

？按照建议使用

，但也要使用：

$（“#copiedtext”）.html（contentTogether）

将不起作用，因为您将其添加为文本

$（“#copiedtext”）.text（contentTogether）；

更改为

$（“#copiedtext”）.html（contentTogether）；

您忘记使用

${}

，并且执行命令“复制”现在将包含以下内容：

previewHeaderHiddenURLdiv

…不确定它是否是所需的内容。它以单独的行打印内容，但在一行中复制两个内容，并在其中添加
标记：Hello stuff在这里
这是hidden@rx65m，似乎您没有更改

$（“#copiedtext”）。text（contentTogether）；

到

$（“#copiedtext”）.html（contentTogether）；

请注意，您必须更改代码才能使用

.html（）

我确实这样做了，老实说，它正确地打印在html文件中，但在剪贴板中它仍然显示
标记。我更新了我的答案，请现在检查！基本上，复制命令正在对我们构建的html文本执行。谢谢Zohir Salak，现在它正按照我的需要工作。也感谢所有帮助我复制的人完成这项工作！非常感谢你们所有人！这里的人总是很好！再次向Zohir Salak或@Zohir Salak问好。我发布了一个与此脚本相关的新问题，但到目前为止，没有人知道如何帮助我。我想知道的是如何将您奇妙的JQuery代码用作Mouseout上的常规JavaScript或香草JavaScript，或作为JQuery mouseleave。要吗你认为你能帮我吗？我非常期待你的回复。提前非常感谢。重要的是让你知道将.click事件更改为.mouseout或.mouseleave或.mousemove只会触发打印（追加）函数，但不是复制函数。实际上，复制函数只有在单击完成后才会发生。请将

.click（）

更改为

.mouseout（）

？首先，非常感谢你，Zohir，它在你的JSFIDLE中工作得非常好。但是，我真的不明白，因为如果我复制每一件东西使它在我的文件上工作，而且在W3T学校的Tryit编辑器、codepen、cssdeck、jsbin中也一样，但它不工作。它只打印（（附录）在文件中，但它不会复制到剪贴板。我尝试了好几次，但在JSFIDLE中无法运行。请自己尝试。