javascript - 如何使用javascript向文本和图像添加类

Question

我非常感谢运行 .parentContainer 查询的帮助，然后找到文本 ABC123 并将其包装在 ID="abc123" 的 div 中。我已经有一些简单的代码可以将内容添加到新的 div 元素中。

除此之外，是否也可以查询 .parentContainer 是否存在 ABC123，然后在存在 ABC123 的情况下向图像添加一个新类？

对不起，如果我在这里显得有点懒惰。我真的只是开始涉足 JavaScript 并且已经阅读了很多关于 DOM 的操作。我倾向于通过研究和调整适用于我自己真实场景的代码来学习负载。

非常感谢！

let parentContainers = document.querySelectorAll('.parentContainer')
  for(let [i,f] of parentContainers.entries()){
    if(f.innerText.includes('ABC123')){
    let div = document.createElement('div');
    div.innerText = 'ABC123';
    div.setAttribute("id", "abc123");
    f.append(div)
  }
}

#ABC123 {
  border: 3px solid red;
}
#abc123 {
  border: 3px solid green;
}
.abc123 {
  border: 2px solid purple;
}
.parentContainer {
  padding: 10px;
  border: 2px solid black;
  margin: 10px 0;
}

<div class="parentContainer">
  <a class="productImage" href="https://www.mywebsite.com/product-1"><img src="https://via.placeholder.com/350x150" alt="Product 1 Image"></a>
  <div class="productInfo">  
ABC123
Product summary description goes here.
  </div>
</div>
<div class="parentContainer">
  <a class="productImage" href="https://www.mywebsite.com/product-1"><img src="https://via.placeholder.com/350x150" alt="Product 1 Image"></a>
  <div class="productInfo">  
ABC123
Product summary description goes here.
  </div>
</div>

标签： javascript

Answer 1

试试这个

let parentContainers = document.querySelectorAll('.parentContainer')
  for(let [i,f] of parentContainers.entries()){
    if(f.innerText.includes('ABC123')){
    let div = document.createElement('div');
    div.innerText = 'ABC123';
    div.setAttribute("id", "abc123");
    f.append(div)
  }
}