ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

.content pre{
    位置: 相対的;
    背景色: #f5f5f5;
    境界線: 1px 実線 #ccc;
    境界線の半径: 4px;
    パディング: 10px;
}
pre .btn-pre-copy{
    -webkit-user-select: なし;
    -moz-user-select: なし;
    -ms-user-select: なし;
    -khtml-ユーザー選択: なし;
    ユーザー選択: なし;
    位置: 絶対;
    上: 10px;
    右: 12px;
    フォントサイズ: 12px;
    行の高さ: 1;
    カーソル: ポインタ;
    色: hsla(0,0%,54.9%,.8);
    トランジション: カラー .1s;
}

$(関数(){
    //コード要素の各文字列にコピー コード ノードを追加します。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
    */
関数 preCopy(obj) {
    //コピーを実行 let btn = $(obj);
    pre = btn.parent() とします。
    //コピー機能を実現するため。一時的なテキストエリアノードを追加します。コンテンツをコピーするために使用します let temp = $("<textarea></textarea>");
    //コンテンツをコピーするときにボタンのテキストをコピーしないでください。まず一時的に空のbtn.text("");
    temp.text(pre.text());
    temp.appendTo(pre);
    temp.select();
    document.execCommand("コピー");
    temp.remove();
    //ボタン名を変更します btn.text("コピーが成功しました");
    //一定時間後にボタン名を元に戻す setTimeout(()=> {
        btn.text("コードをコピー");
    },1500);
}