javascript - 在文本大于的 span 之后添加 HTML

Question

我有部分 HTML:

<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>

我要添加<p>Free shipping</p>之后<span class="price">价格大于400的产品。

Answer 1

您可以使用 jQuery 的 .each()和 after()

$('.price').each(function(){
  if($(this).text() > 400)
    $(this).after('<p>Free shipping</p>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>

您也可以在普通 JS 中实现这一点

var allPrice = [].slice.call(document.querySelectorAll('.price'));
allPrice.forEach(function(el){
  if(el.textContent > 400){
    var p = document.createElement('p');
    p.textContent = 'Free shipping';
    el.parentNode.insertBefore(p, el.nextSibling);
  }
});

<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>