如何通过背景图片获取指定Div并追加新Div？

没问题，这里有两种可靠的方法来解决你的需求——通过背景图片定位这个自动生成的Div，然后给它追加新元素：

方法1：使用CSS属性选择器快速定位 #

利用HTML元素的style属性做模糊匹配，直接定位到包含目标背景图URL的Div：

// 用图片文件名做模糊匹配，适配浏览器对URL的格式处理
const targetDiv = document.querySelector('div[style*="slajder1.jpg"]');

if (targetDiv) {
  // 创建要追加的新Div
  const newDiv = document.createElement('div');
  // 给新Div设置样式和内容（可根据需求修改）
  newDiv.style.cssText = `
    position: absolute;
    bottom: 30px;
    left: 30px;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    font-size: 14px;
  `;
  newDiv.textContent = '这是追加的新内容';
  
  // 将新Div追加到目标Div内部
  targetDiv.appendChild(newDiv);
}

这种方法简洁高效，但要注意：浏览器可能会自动给style里的URL添加双引号（比如把url(xxx)转成url("xxx")），所以用图片文件名做模糊匹配比完整URL匹配更稳妥。

方法2：遍历元素（更鲁棒，适配浏览器样式格式差异） #

如果属性选择器失效（比如浏览器对样式的处理差异），可以遍历页面上所有Div，检查它们的背景图属性：

// 获取页面上所有Div元素
const allDivs = document.querySelectorAll('div');

allDivs.forEach(div => {
  // 获取元素实际生效的背景图（优先取inline style，没有则用计算后的样式）
  const bgImage = div.style.backgroundImage || getComputedStyle(div).backgroundImage;
  
  // 检查背景图是否包含目标图片的URL片段
  if (bgImage.includes('https://taxirondo.net-informatika.com/wp-content/uploads/2018/04/slajder1.jpg')) {
    // 创建并配置新Div
    const newDiv = document.createElement('div');
    newDiv.style.cssText = `
      position: absolute;
      top: 20px;
      right: 20px;
      width: 150px;
      height: 80px;
      background-color: rgba(255,255,255,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
    `;
    newDiv.innerHTML = '<strong>追加的新Div</strong>';
    
    // 追加到目标Div中
    div.appendChild(newDiv);
  }
});

这种方法兼容性更好，不管浏览器怎么处理背景图的格式，只要图片URL正确就能匹配到目标元素。

关键注意点 #

• 因为目标Div是position:absolute定位，所以追加的子Div建议也设置position:absolute，这样可以基于父Div的边界自由调整位置，不会影响原有布局。
• 记得添加if (targetDiv)或者遍历中的判断，避免找不到目标元素时出现控制台报错。
• 如果页面上有多个使用同一张背景图的Div，你可能需要添加额外的判断条件（比如匹配宽度、高度等属性）来精准定位目标元素。

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