js实现替换原文本的内容

小奋斗♛

已于 2024-06-30 16:15:57 修改

阅读量128

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2024-06-30 15:23:53 首次发布

本文链接：https://blog.csdn.net/m0_72684019/article/details/140081523

版权

1、需求

将‘variant-description_text’中的文案替换为数组中的内容

2、效果

3、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>替换文本</title>
  </head>
  <body>
    <div class="variant-description">
      <div class="variant-description_text">111111</div>
    </div>
    <div class="variant-description">
      <div class="variant-description_text">222222</div>
    </div>
    <div class="variant-description">
      <div class="variant-description_text">3333333</div>
    </div>

    <script>
      const desText = ["hahahahaahha", "dadadadada", "qqqqqqqqqq"];
      const text = document.querySelectorAll(".variant-description_text");
      if (text.length === desText.length) {
        text.forEach((item, index) => {
          item.innerHTML = desText[index];
        });
      } else {
        console.warn("图片数量与元素数量不匹配");
      }
    </script>
  </body>
</html>