复制动态生成div的innerHTML到剪贴板报错、无法访问.shortened元素求助

核心问题原因 #

• 无法访问.shortened元素：fetch为异步请求，对应DOM是接口请求成功后才动态插入页面的，若在请求发起阶段就查询该元素，此时DOM尚未渲染，只能获取到null。同时原有代码存在基础语法错误，会导致逻辑中断、DOM无法正常生成。
• 复制时报类型错误：绝大多数情况是获取.shortened元素时拿到null，读取其内容时触发空值类型错误；少数为剪贴板API调用时参数不符合规范。

修正后的完整代码 #

const results = document.createElement('div')
// 请替换为你实际的容器、按钮选择器
const answer = document.querySelector('#answer容器的选择器')
const mainBtn = document.querySelector('#按钮的选择器')

// 封装复制逻辑
function copyLink(shortUrl) {
  navigator.clipboard.writeText(shortUrl)
    .then(() => {
      // 可自定义复制成功提示，比如修改按钮文字
      console.log('复制成功')
    })
    .catch(err => {
      console.error('复制失败：', err)
    })
}

// 短链生成接口调用
function result(url){
  // 修复：模板字符串需要用反引号包裹
  fetch(`https://api.shrtco.de/v2/shorten?url=${url}`)
  .then(res => res.json())
  .then(data =>{
    if (data.ok){
      // 修复：删除无意义的重复变量声明
      const shortLink = data.result.short_link
      results.innerHTML = `
      <div class="result">
        <div class="sent">${data.result.original_link}</div>
        <div class="shortened" id="short">
          <div>${shortLink}</div>
          <div class="copy-wrapper"></div>
          <!-- 直接传入短链参数，避免二次查询DOM -->
          <a href="#" class="copy" onClick="copyLink('${shortLink}')">Copy</a>
        </div>
      </div>`
      answer.appendChild(results)
    }else {
      alert('incorrect url')
    }
    mainBtn.innerHTML = "Shorten it!"
  })
  .catch(err => {
    console.error('请求失败：', err)
    mainBtn.innerHTML = "Shorten it!"
  })
}

额外说明 #

如果需要在其他位置访问.shortened元素，必须要在fetch的.then回调里、DOM插入页面之后再执行查询操作，示例：

// 正确的查询时机
answer.appendChild(results)
const shortenedEl = document.querySelector('.shortened')
console.log(shortenedEl.innerText)

如果不想使用行内onClick，可以用事件委托的方式绑定复制事件，避免全局函数污染：

// 全局仅绑定一次即可，无需每次生成DOM重复绑定
document.addEventListener('click', e => {
  if (e.target.classList.contains('copy')) {
    const shortUrl = e.target.closest('.result').querySelector('.shortened div').innerText
    navigator.clipboard.writeText(shortUrl).then(() => {
      e.target.innerText = '已复制'
      setTimeout(() => e.target.innerText = 'Copy', 2000)
    })
    e.preventDefault()
  }
})

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