【javascript】pタグやdivタグとかのテキストをクリックしたらコピーする方法

pタグやdivタグの中身のテキストをクリックしたらコピーする機能を実装するときにノードを揃えて作業をする必要性があり悩んだので備忘録

inputタグで入力した内容をコピーする方法であれば前回やった備忘録があるのでリンク貼っときます

ノードを操作してpタグの中身をコピーできるようにする必要性がある

javascriptで何か要素を追加しようとする時にノードを操作して追加する必要性があるんだけど、pタグ等をクリックしてコピーする機能を実装しようとする時もノードを操作する必要性があるみたい

<p id="copy">Copyする文言が入ります。</p>

<script>
function copy() {
	// ↓ Rangeオブジェクト作成
	let range = document.createRange();
	// ↓ コピーする要素を取得
	let copyTarget = document.getElementById("copy");
	// ↓ #copyの要素全体を選択
	range.selectNodeContents(copyTarget);
	// ↓ 選択した要素(ノード)の文字列を取得(selectionオブジェクトを取得)
	let selection = document.getSelection();
	// ↓ 選択した範囲を解除(これがないと次のaddRangeが上手く動かない)
	selection.removeAllRanges();
	// ↓ selectionオブジェクトにrangeオブジェクトを追加
	selection.addRange(range);

	document.execCommand("copy");// クリップボードにコピー
	selection.removeAllRanges();// テキスト選択を解除
}
document.getElementById("copy").addEventListener("click", copy);
</script>

色々と調べながらやってたんだけどaddRange()がよくわからん
addRangeメソッドは選択範囲が既に存在していると上手く動かないみたいで直前でremoveAllRangesメソッドを使って選択範囲を解除している
そして、最後にテキストの選択を解除するためのremoveAllRanges()を使ってるんだけど最初のremoveAllRanges()で解除されないのだろうか？