Как скопировать полный элемент div в буфер обмена, используя только Javasript или Typescript?

Question

У меня есть элемент html div, похожий на:

<div id="divTest" style='background-color:grey;'>
Hello
</div>

Я хочу скопировать весь элемент div, а не только содержимое "Hello".

Это то, что я пробовал, но копирует только контент:

var element = document.getElementById("divTest");

var selection = window.getSelection();
var range = document.createRange();
range.selectNode(element);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("Copy");

Если у кого-нибудь есть идеи, как скопировать полный элемент div ??

Спасибо

Answer 1

Вы также можете использовать интерфейс навигатора.

const element = document.querySelector('#divTest');
const promise = navigator.clipboard.writeText(element.outerHTML)
promise.then(
            () => console.log('Success'), 
            () => console.log('Failure')
         )

Это более подходящее решение, чем execCommand, и Firefox объявил document.execCommand устаревшим методом. Чтобы полностью понять API разрешений от navigator.clipboard, go до и понять безопасный контекст и согласие пользователя

Answer 2

Вот как это можно сделать (проверьте всех, кто поставил отрицательную оценку, даже не задумываясь о решении)

<div id='myTestELement' style='background-color:grey;'>
Hello
</div>

<input type="text"  id="myInput">

var copyText = document.getElementById("myInput");
copyText.value = document.getElementById("myTestELement").outerHTML;
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");

Это скопирует элемент html в виде строки к значению textInput.