javascript - ReplaceWith() 不返回标签

Question

我也尝试在其他问题上搜索此内容，但我似乎不理解这种方法。我正在尝试在图像顶部创建标题，如果文本长度超过 40 个字符，脚本应减少文本的长度，并在字符串末尾添加 3 个点

let content = document.getElementById('videoText');
let valuare = content.innerHTML;
let lungime = valuare.length;

if( lungime > 40){
    let newValuare = valuare.substring(0, 40) + " ...";
    console.log(newValuare);
    content.replaceWith('<span>' + newValuare.text() + '</span>');
}

在控制台日志中，文本正是我想要的，但是浏览器不会以这种形式显示任何内容，因为它查询 newValuare.text()不是一个函数，如果我删除 .text()它显示的方法，但没有显示为字符串的跨度标签。我尝试在没有 '<span>' 的情况下引用它们标签，但它只显示文本，没有标签。

如何在标签之间添加特定文本。

<img src="video1.jpg" alt="">
 <div class="video-text">
  <i class="fa fa-play"></i>
   <span>1:12</span>
   <span id="videoText">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate tempore quaerat delectus, alias praesentium magni ullam voluptatibus. Minima, corrupti officiis illum dicta pariatur obcaecati sed atque voluptate sapiente aliquid modi!
                Enim doloribus officiis nulla velit dignissimos nam, nisi laboriosam placeat omnis veritatis? Aspernatur eveniet dolorum voluptates, odit ut hic temporibus animi, soluta nesciunt laudantium autem, quidem incidunt reiciendis rerum neque?
                Sequi, laborum nam deserunt delectus ipsum expedita maxime reiciendis distinctio nesciunt debitis nihil tempora quasi at aliquam commodi? Dolores, officiis. Voluptatibus odio magni repudiandae dolore ipsam accusantium iure dolores vero.
                Laboriosam quas tempore architecto voluptatum, incidunt itaque fugit maxime quisquam nesciunt accusantium? Qui repudiandae nemo rerum accusamus illo, excepturi sequi repellat iure non ipsam reprehenderit voluptates minus maiores enim natus!</span>
              </div>

Answer 1

使用 textContent 代替 innerHtml 来获取元素的文本。

然后您可以替换 if 条件中的文本，例如，

content.textContent = newValuare;

代码片段如下，

let content = document.getElementById('videoText');
let valuare = content.textContent;
let lungime = valuare.length;

if( lungime > 40){
    let newValuare = valuare.substring(0, 40) + " ...";
    content.textContent = newValuare;
}

 <div class="video-text">
  <i class="fa fa-play"></i>
   <span>1:12</span>
   <span id="videoText">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate tempore quaerat delectus, alias praesentium magni ullam voluptatibus. Minima, corrupti officiis illum dicta pariatur obcaecati sed atque voluptate sapiente aliquid modi!
                Enim doloribus officiis nulla velit dignissimos nam, nisi laboriosam placeat omnis veritatis? Aspernatur eveniet dolorum voluptates, odit ut hic temporibus animi, soluta nesciunt laudantium autem, quidem incidunt reiciendis rerum neque?
                Sequi, laborum nam deserunt delectus ipsum expedita maxime reiciendis distinctio nesciunt debitis nihil tempora quasi at aliquam commodi? Dolores, officiis. Voluptatibus odio magni repudiandae dolore ipsam accusantium iure dolores vero.
                Laboriosam quas tempore architecto voluptatum, incidunt itaque fugit maxime quisquam nesciunt accusantium? Qui repudiandae nemo rerum accusamus illo, excepturi sequi repellat iure non ipsam reprehenderit voluptates minus maiores enim natus!</span>
              </div>