如何使用JavaScript实现HTML/文本的复制粘贴功能

你写的代码存在4个核心错误，完全不符合DOM操作和剪贴板API的使用规则：

• document.createElement() 仅接受HTML标签名作为参数（比如div、textarea），传入CSS类选择器.copytext无法创建有效DOM节点
• 需求是读取页面已存在的.copytext元素内的文本，不是新建元素给它赋值value，逻辑方向完全错误
• document.execCommand() 仅支持标准命令名（如copy、cut），传入CSS类.pastehere作为参数没有任何效果；且该API已被官方废弃，不推荐继续使用
• 普通HTML元素没有value属性和select()方法，只有input、textarea这类表单控件支持这两个属性/方法，普通元素读写文本要使用textContent属性

如果只是要实现页面内文本的复制填充，不需要把内容写入系统剪贴板，直接做DOM操作即可，代码最简洁也没有兼容性问题：

// 抓取源元素和目标元素
const source = document.querySelector('.copytext');
const target = document.querySelector('.pastehere');

// 元素存在时执行文本赋值
if (source && target) {
  target.textContent = source.textContent.trim();
}

如果你确实需要把文本同步写入系统剪贴板，再填充到目标位置，使用现代Clipboard API实现即可，注意该API需要在用户主动触发的事件（比如点击按钮）回调中调用，否则会被浏览器安全策略拦截：

async function syncText() {
  const source = document.querySelector('.copytext');
  const target = document.querySelector('.pastehere');
  if (!source || !target) return;

  const text = source.textContent.trim();
  try {
    // 写入系统剪贴板
    await navigator.clipboard.writeText(text);
    // 填充到目标位置
    target.textContent = text;
  } catch (e) {
    console.error('操作失败：', e);
  }
}

// 示例：绑定到按钮点击事件触发
// document.querySelector('#triggerBtn').addEventListener('click', syncText)

提示：同页面内的文本转移不需要走剪贴板逻辑，直接DOM赋值性能更好，也不会触发浏览器的权限限制。

内容的提问来源于stack exchange，提问作者Arif