Копирование HTML-элементов в буфер обмена: методы и примеры JavaScript

Чтобы скопировать элемент HTML в буфер обмена с помощью JavaScript, вы можете использовать различные методы. Вот несколько примеров:

Метод 1: использование document.execCommand()

function copyElementToClipboard(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    const range = document.createRange();
    range.selectNode(element);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    selection.removeAllRanges();
    console.log('Element copied to clipboard');
  }
}

Метод 2. Использование API буфера обмена

function copyElementToClipboard(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    navigator.clipboard.writeText(element.outerHTML)
      .then(() => {
        console.log('Element copied to clipboard');
      })
      .catch((error) => {
        console.error('Failed to copy element to clipboard:', error);
      });
  }
}

Метод 3. Создание временного элемента textarea

function copyElementToClipboard(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    const textarea = document.createElement('textarea');
    textarea.value = element.outerHTML;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    console.log('Element copied to clipboard');
  }
}

Эти методы позволяют копировать HTML-содержимое элемента с указанным elementIdв буфер обмена. Вы можете вызвать любой из этих методов, передав идентификатор нужного элемента в качестве аргумента, например copyElementToClipboard('myElement').