想要使用 javascript 向每个 <p> 标签添加显示更多内容

Question

我对每个 class 使用了 parentElement.appendChild(SpanTag)，但 span 标签只添加到最后一个 <p> 标签。

var divsToControl = document.getElementsByTagName('p');
var spanTag = document.createElement('span');
spanTag.innerText = "...see more";

for (var i = 0; i < divsToControl.length; i++) {
  var count = divsToControl[i].innerHTML.length;
  if (count > 200) {
    divsToControl[i].innerHTML = divsToControl[i].innerHTML.substring(0, 300);
    divsToControl[i].appendChild(spanTag);
  }
}

<h1>Cutting the Text</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis
  praesentium hic eum facere earum aliquid, quas, animi est vitae quidem molestiae corrupti ullam, laboriosam cupiditate neque beatae quod impedit. Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum corporis repudiandae quo doloribus.
  Eligendi ullam sunt minus hic, accusantium quae!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis
  praesentium hic eum facere earum aliquid, quas, animi est vitae quidem molestiae corrupti ullam, laboriosam cupiditate neque beatae quod impedit. Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum corporis repudiandae quo doloribus.
  Eligendi ullam sunt minus hic, accusantium quae!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis
  praesentium hic eum facere earum aliquid, quas, animi est vitae quidem molestiae corrupti ullam, laboriosam cupiditate neque beatae quod impedit. Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum corporis repudiandae quo doloribus.
  Eligendi ullam sunt minus hic, accusantium quae!
</p>

我得到如下输出

Cutting the Text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis praesentium hic eum facere earum a

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis praesentium hic eum facere earum a

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis praesentium hic eum facere earum a...see more

我想要 ...more applied 每个段落如下

Cutting the Text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis praesentium hic eum facere earum a...see more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis praesentium hic eum facere earum a...see more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis praesentium hic eum facere earum a...see more

Answer 1

问题是您只创建了 1 个 span 元素，但您应该为每个段落创建一个新元素：

const divsToControl = document.getElementsByTagName('p');

for (var i = 0; i < divsToControl.length; i++) {
  const count = divsToControl[i].innerHTML.length;
  
  if (count > 200) {
    const spanTag = document.createElement('span');
    spanTag.innerText = "...see more";
    divsToControl[i].innerHTML = divsToControl[i].innerHTML.substring(0, 300);
    divsToControl[i].appendChild(spanTag);
  }
}

<h1>Cutting the Text</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis
  praesentium hic eum facere earum aliquid, quas, animi est vitae quidem molestiae corrupti ullam, laboriosam cupiditate neque beatae quod impedit. Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum corporis repudiandae quo doloribus.
  Eligendi ullam sunt minus hic, accusantium quae!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis
  praesentium hic eum facere earum aliquid, quas, animi est vitae quidem molestiae corrupti ullam, laboriosam cupiditate neque beatae quod impedit. Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum corporis repudiandae quo doloribus.
  Eligendi ullam sunt minus hic, accusantium quae!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia debitis beatae asperiores corrupti fugiat perferendis minima hic aliquid quibusdam et, molestiae tempore commodi amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis
  praesentium hic eum facere earum aliquid, quas, animi est vitae quidem molestiae corrupti ullam, laboriosam cupiditate neque beatae quod impedit. Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum corporis repudiandae quo doloribus.
  Eligendi ullam sunt minus hic, accusantium quae!
</p>

Answer 2

divsToControl.appendChild(spanTag);

这里的问题是您要追加一个 span 元素，所以您追加它，然后将其移动到下一个，然后再移动到下一个，依此类推。最后，您将它移动到最后一个元素。

相反，您需要在循环内为每个段落创建一个新跨度。