希望使用javascript向每个<p>标记添加更多的显示

Question

我对每个类都使用了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

问题是您只创建了一个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元素，因此您需要追加它，然后将它移动到下一个元素，然后再将它移动到下一个元素，以此类推。最后，你把它移到最后一个元素。

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