Question

我正在尝试编写一个生成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

Answer 1

最简单的解决方案是使用您需要的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();

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

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();

Answer 2

问题在于：

item.innerHTML = span;

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

item.innerHTML = span.toString();

您最终获得[object HTMLSpanElement]的位置。相反，它似乎只是想要你构造的span元素的html。 outerHTML^MDN会为你解决这个问题。

item.innerHTML = span.outerHTML;

如果条件满足，如何循环我的HTML并注入文本？

的JavaScript：

2 个答案: