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()method，它会显示但没有显示为字符串的跨度标签。 我尝试在没有'<span>'tags 的情况下不引用它们，但它只显示一个文本，没有标签。

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

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

而sn-p如下，

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>