给pre添加复制按钮，研究好久没成功，请教大家如何才能实现：
<div class="News_con" id="News_con">
'P_Con' class="brush:css">.main{float:left; width:100px;}
<div class='Copy_btn'>div>
div>
$(function(){
// 需要等页面上的代码加载完成后，给右上角的标签区域加上一个按钮。
$('.Copy_btn').each(function(i) {
var str = " ";
$(this).append(str);
});
})
function copy(i){
var text = $("#News_con pre").eq(i).text();
var input = $("pre");
input.text = pre.text();
document.body.appendChild(pre);
input.select(); // 选取文本域中的内容.
document.execCommand("Copy");
//再移除输入框
//document.body.removeChild(input);
//vm.$message.success("复制成功！");
}
$(function(){
//给每一串代码元素增加复制代码节点
let preList = $(".content pre");
for (let pre of preList) {
//给每个代码块增加上“复制代码”按钮
let btn = $("<span class=\"btn-pre-copy\" onclick='preCopy(this)'>复制代码</span>");
btn.prependTo(pre);
}
});
/**
* 执行复制代码操作
* @param obj
*/
function preCopy(obj) {
//执行复制
let btn = $(obj);
let pre = btn.parent();
//为了实现复制功能。新增一个临时的textarea节点。使用他来复制内容
let temp = $("<textarea></textarea>");
//避免复制内容时把按钮文字也复制进去。先临时置空
btn.text("");
temp.text(pre.text());
temp.appendTo(pre);
temp.select();
document.execCommand("Copy");
temp.remove();
//修改按钮名
btn.text("复制成功");
//一定时间后吧按钮名改回来
setTimeout(()=> {
btn.text("复制代码");
},1500);
}
https://blog.csdn.net/ab1068/article/details/123432749
这个代码我试过了，复制的是全部页面内容，我想要复制pre内的内容，而且需要多个pre复制（数组i++）
望采纳！！！点击回答右侧采纳即可！！
试试我的代码
<div class="News_con" id="News_con">
<pre id='P_Con' class="brush:css">.main{float:left; width:100px;}</pre>
<div class='Copy_btn'>
<input type='button' onclick='copy("P_Con")' value='复制'>
</div>
</div>
<script>
function copy(id) {
var text = document.getElementById(id).innerText;
var input = document.createElement("textarea");
input.text = text;
document.body.appendChild(input);
input.select();
document.execCommand("Copy");
document.body.removeChild(input);
alert("复制成功！")
}
</script>
在循环中，触发copy事件中的text是否正确；pre.text()这个pre对象是否定义了
提供参考实例【js 【实用技巧】给全文代码添加一键复制按钮】，链接：https://blog.csdn.net/weixin_41192489/article/details/117170212
我可以给您提供几种在HTML中为
标签添加复制按钮的方法。使用JavaScript和HTML添加按钮：
<pre> <code id="code"> 这里是要复制的文本 </code> </pre> <button id="copy-button" onclick="copyCode()">复制</button> <script> function copyCode() { var copyText = document.getElementById("code"); navigator.clipboard.writeText(copyText.textContent).then(function() { console.log("复制成功！"); }, function(err) { console.error("复制失败：", err); }); } </script>使用clipboard.js库添加按钮：
<pre> <code class="language-js" id="code"> 这里是要复制的文本 </code> </pre> <button class="btn" data-clipboard-target="#code">复制</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> <script> var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.log("复制成功！"); e.clearSelection(); }); clipboard.on('error', function(e) { console.error("复制失败：", e); }); </script>这两种方法都是基于clipboard.js库，可以支持大多数现代浏览器使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制功能</title>
<style>
.copy-class {
background: #DEE1E6;
width: 20%;
}
</style>
</head>
<body>
<pre id="copy" class="copy-class">
1. 复制功能，这是需要复制的内容
2. 复制功能，这是需要复制的内容
3. 复制功能，这是需要复制的内容
</pre>
<script>
// 点击 pre 区域，完成复制
var copyDom = document.getElementById("copy");
copyDom.onclick = function () {
let textarea = document.createElement('textarea');
textarea.setAttribute('readonly', 'readonly')
textarea.value = copyDom.innerText
document.body.appendChild(textarea)
// 选取文本域中的内容
textarea.select()
document.execCommand("Copy");
document.body.removeChild(textarea)
alert('复制成功')
}
</script>
</body>
</html>