想要使用javascript為每個<p>標簽添加更多顯示

我用于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

uj5u.com熱心網友回復：

問題是您只創建了 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>

uj5u.com熱心網友回復：

divsToControl.appendChild(spanTag);

這里的問題是您要附加一個跨度元素，因此您附加它，然后將其移動到下一個，然后將其移動到下一個，依此類推。最終，您將其移至最后一個元素。

相反，您需要在回圈內為每個段落創建一個新跨度。

標籤：javascript html javascript代理

上一篇：用javascript語言減少和優化一個函式

下一篇：ReactJS不加載