如何循环通过我的html和注入文本，如果一个条件是满足

How to loop through my html and inject text if a condition is met?

本文关键字：如果 一个 条件 文本 满足 循环 何循环 html 我的 注入      更新时间：2023-09-26

我试图写一个函数，生成一个span标签，并注入一些文本，如果满足条件，但我一直接收[object HTMLSpanElement]。我使用innerText和innerHTML不正确吗?

JavaScript: 

function checkBlankReviews(){
  var reviewTexts = document.querySelectorAll('p.text');
  Array.prototype.forEach.call(reviewTexts, function (item) { // iterate the elements
      if (item.innerText === '') {
          var span = document.createElement('span');
          span.innerText = "No Reviews";
          item.innerHTML = span;
          
          console.log('no reviews for: ' + item.innerHTML);
      } 
    return item;
    
  });

}

这是我的jsbin

问题是:

item.innerHTML = span;

innerHTML需要一个字符串，所以这基本上会变成

item.innerHTML = span.toString();

这就是你最终得到[object HTMLSpanElement]的地方。相反，您似乎只想要您所构造的span元素的html。outerHTML <一口> MDN 共舞,将为您解决这个问题。

item.innerHTML = span.outerHTML;

最简单的解决方案是创建一个字符串，包含所需的html，并将其插入节点:

function checkBlankReviews(){
  var reviewTexts = document.querySelectorAll('p.text');
  Array.prototype.forEach.call(reviewTexts, function (item) { 
      if (item.innerText === '') {
          item.innerHTML = "<span>No Reviews</span>";
          console.log('no reviews for: ' + item.innerHTML);
      } 
    return item;
  });

}
checkBlankReviews();

另一个选择是将文本设置为<p>元素的innerText:

function checkBlankReviews(){
  var reviewTexts = document.querySelectorAll('p.text');
  Array.prototype.forEach.call(reviewTexts, function (item) { 
      if (item.innerText === '') {
          item.innerText = "No Reviews";
          console.log('no reviews for: ' + item.innerText);
      } 
    return item;
  });

}
checkBlankReviews();
相关文章：