在jQuery中创建div有没有更简洁的写法？当前使用HTML字符串拼接实现

方案1：优化模板字符串写法（改动最小，最易实现） #

模板字符串本身支持直接跨行书写，不需要用+拼接多段内容，调整后代码会清爽很多：

artworks.records.forEach(artwork => {
  const imgSrc = artwork.images.length ? artwork.images[0].baseimageurl : './assets/no-image-available.png'
  const record = `
    <div class='artwork'>
      <div class='artwork-image-container'>
        <img class="artwork-image" src="${imgSrc}" alt="${artwork.title}" />
      </div>
      <div class='image-description-container'>
        <p class="image-description">${artwork.title}</p>
      </div>
    </div>
  `
  divToBeRenderedIn.insertAdjacentHTML('beforeend', record)
})

注意如果是原生JS环境，原来的append方法传入字符串会直接当成文本节点渲染，替换为insertAdjacentHTML才会正常解析HTML结构；如果你之前用的是jQuery的append则不需要修改。

方案2：批量生成后一次性插入（性能更优） #

如果图片数组长度较大，循环中多次操作DOM会拖慢渲染速度，用map生成所有HTML片段后一次性插入，DOM操作次数从N次降到1次：

const htmlContent = artworks.records.map(artwork => {
  const imgSrc = artwork.images.length ? artwork.images[0].baseimageurl : './assets/no-image-available.png'
  return `
    <div class='artwork'>
      <div class='artwork-image-container'>
        <img class="artwork-image" src="${imgSrc}" alt="${artwork.title}" />
      </div>
      <div class='image-description-container'>
        <p class="image-description">${artwork.title}</p>
      </div>
    </div>
  `
}).join('')
divToBeRenderedIn.insertAdjacentHTML('beforeend', htmlContent)

方案3：原生DOM API写法（安全性更高） #

如果artwork.title属于用户可输入的内容，字符串拼接容易存在XSS注入风险，用原生DOM API生成节点可以自动转义特殊字符，避免安全问题：

artworks.records.forEach(artwork => {
  // 外层艺术品容器
  const artworkEl = document.createElement('div')
  artworkEl.className = 'artwork'
  
  // 图片区域
  const imgContainer = document.createElement('div')
  imgContainer.className = 'artwork-image-container'
  const img = document.createElement('img')
  img.className = 'artwork-image'
  img.src = artwork.images.length ? artwork.images[0].baseimageurl : './assets/no-image-available.png'
  img.alt = artwork.title
  imgContainer.appendChild(img)
  
  // 描述区域
  const descContainer = document.createElement('div')
  descContainer.className = 'image-description-container'
  const desc = document.createElement('p')
  desc.className = 'image-description'
  desc.textContent = artwork.title
  descContainer.appendChild(desc)
  
  artworkEl.append(imgContainer, descContainer)
  divToBeRenderedIn.appendChild(artworkEl)
})

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