通过GTM替换页面多个div内文本的问题求助

问题背景 #

需要通过GTM替换页面中两处不同元素的文本：

• 将.txt元素里的「Loading...」替换为「Searching.. please allow 20 seconds.」
• 将.site元素里的「Free standard connection」替换为「First 3 months free」

原本分开写两个脚本实现时，出现页面功能异常：用户无法点击「下一步」或选择套餐，需要合并脚本并修复交互问题。

原脚本代码：

<script type="text/javascript">(function(){  var elements = document.querySelectorAll(".txt");    for (i = 0; i < elements.length; ++i) {    var str = elements[i].innerHTML;    elements[i].innerHTML = str.replace("Loading...", "Searching.. please allow 20 seconds.");}})();</script>
<script type="text/javascript">(function (){  var elements = document.querySelectorAll(".site");    for (i = 0; i < elements.length; ++i) {    var str = elements[i].innerHTML;    elements[i].innerHTML = str.replace("Free standard connection", "First 3 months free");}})();</script>

合并后的优化脚本 #

直接合并两个自执行函数，同时改用textContent替换innerHTML（避免破坏元素绑定的交互事件）：

(function() {
  // 处理加载提示文本替换
  const txtElements = document.querySelectorAll(".txt");
  for (let i = 0; i < txtElements.length; i++) {
    const originalText = txtElements[i].textContent;
    txtElements[i].textContent = originalText.replace("Loading...", "Searching.. please allow 20 seconds.");
  }

  // 处理套餐文本替换
  const siteElements = document.querySelectorAll(".site");
  for (let j = 0; j < siteElements.length; j++) {
    const originalText = siteElements[j].textContent;
    siteElements[j].textContent = originalText.replace("Free standard connection", "First 3 months free");
  }
})();

为什么之前会出现交互异常 #

之前的问题并非重复调用脚本导致，而是使用innerHTML修改内容时，会重新渲染元素内部的DOM结构，导致原本绑定在元素上的点击、选择等事件监听被清除。改用textContent只会修改纯文本内容，不会影响元素的DOM结构和已绑定的事件，能有效避免交互异常。

使用说明 #

将上述合并后的脚本作为自定义HTML标签添加到GTM中，确保触发时机设置为目标元素已加载完成（比如选择「DOM Ready」或「Window Loaded」触发），避免因元素未渲染导致替换失败。

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