I used parentElement.appendChild(SpanTag) for every class but the span tag gets added only to the last <p> tag.
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>I get the output like below
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
I want ...more applied to every paragraph like below
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
>Solution :
The issue was that you only created 1 span element, but you should create a new one for each paragraph:
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>