如何使用jQuery替换或移除指定div文本并写入新内容？

要实现页面加载时自动修改最后两个<div>的内容，可在<head>标签中编写DOM加载完成的监听代码，用原生JavaScript操作元素。以下是几种常见场景的实现：

场景1：替换最后两个div的全部文本 #

<head>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const allDivs = document.querySelectorAll('div');
      // 确保页面至少有两个div元素
      if (allDivs.length >= 2) {
        // 修改倒数第一个div的文本
        allDivs[allDivs.length - 1].textContent = '倒数第一个div的新内容';
        // 修改倒数第二个div的文本
        allDivs[allDivs.length - 2].textContent = '倒数第二个div的新内容';
      }
    });
  </script>
</head>

场景2：替换倒数第一个div文本，移除倒数第二个div #

<head>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const allDivs = document.querySelectorAll('div');
      if (allDivs.length >= 2) {
        // 替换倒数第一个div内容
        allDivs[allDivs.length - 1].textContent = '更新后的倒数第一个div内容';
        // 删除倒数第二个div
        allDivs[allDivs.length - 2].remove();
      }
    });
  </script>
</head>

场景3：给最后两个div追加新文本（保留原内容） #

<head>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const allDivs = document.querySelectorAll('div');
      if (allDivs.length >= 2) {
        // 给倒数第一个div追加文本
        allDivs[allDivs.length - 1].textContent += ' 这是新增的内容';
        // 给倒数第二个div追加文本
        allDivs[allDivs.length - 2].textContent += ' 这也是新增的内容';
      }
    });
  </script>
</head>

关键说明 #

• DOMContentLoaded事件确保DOM完全加载后再执行操作，避免出现找不到元素的问题
• 通过querySelectorAll('div')获取所有div元素，利用索引length-1和length-2定位最后两个元素
• textContent用于修改元素的文本内容，remove()方法用于直接删除元素

内容的提问来源于stack exchange，提问作者henry