Want to add show more to every <p> tag using javascript-CodePudding

I used parentElement.appendChild(SpanTag) for every class but the span tag gets added only to the last <p> tag.

this is my html code

<!DOCTYPE html\>



    
    
    
    Document
    
    


    <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>

this is my javascript code

var divsToControl = document.getElementsByClassName('text');
var spanTag=document.createElement('span');
spanTag.innerText="...see more";
spanTag.addEventListener("click",(e)=>{
    window.location="https://stackoverflow.com";
});

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.appendChild(spanTag);
    }
}

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

CodePudding user response：

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;
  const spanTag = document.createElement('span');
  spanTag.innerText = "...see more";
  
  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>

CodePudding user response：

divsToControl.appendChild(spanTag);

The problem here is that you are appending the one span element, so you append it, then move it to the next, then move it the next and so on. Eventually, you move it to the last element.

Instead, you need to create a new span for every paragraph, inside the loop.