使用JavaScript批量替换div元素时出现TypeError错误求助

问题场景 #

尝试用JavaScript批量替换div元素，现有代码及运行问题如下：

JavaScript代码 #

const ref_link = document.querySelectorAll('.is-field.link');

ref_link.forEach(function (element) {

    const ref_link_content = element.querySelector(".is-field.link .value").innerHTML;
    alert(ref_link_content);

    const ref_link_new = document.createElement('a');
    
    ref_link_new.innerHTML = '<p class="icon"><a href="' + ref_link_content + '">Website</a></p>';
    ref_link.parentNode.replaceChild(ref_link_new, ref_link);
});

HTML结构 #

<div class="is-field link">
  <div class="value">https://link1.com</div>
</div>

<div class="is-field link">
  <div class="value">https://link2.com</div>
</div>

<div class="is-field link">
  <div class="value">https://link3.com</div>
</div>

代码弹出第一个链接内容后，控制台抛出错误：

header.js?ver=1.0:35 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'replaceChild')
    at header.js?ver=1.0:35:21
    at NodeList.forEach (<anonymous>)
    at header.js?ver=1.0:27:10

期望实现的最终HTML结构：

<div class="is-field link">
  <p class="link"><a href="https://link1.com">Website</a></p>
</div>

<div class="is-field link">
  <p class="link"><a href="https://link2.com">Website</a></p>
</div>

<div class="is-field link">
  <p class="link"><a href="https://link3.com">Website</a></p>
</div>

错误原因 #

1. replaceChild调用对象错误：循环中误用了ref_link（整个NodeList集合）调用parentNode.replaceChild，但NodeList本身没有parentNode属性，应使用当前循环的element（单个DOM元素）操作。
2. 内部选择器冗余：element.querySelector(".is-field.link .value")中，element已经是.is-field.link元素，直接查找.value即可，重复添加外层类名可能导致后续元素无法正确获取内容。
3. 元素创建不符合需求：目标是用<p>包裹链接，但代码创建了<a>元素并嵌套<p>和<a>，会生成无效的嵌套链接结构，不符合预期。

修复后的代码 #

保留外层.is-field.linkdiv，仅替换内部内容的版本（匹配期望结构）：

const refLinks = document.querySelectorAll('.is-field.link');

refLinks.forEach(function (element) {
    // 直接在当前element下查找.value元素，用textContent避免HTML干扰
    const linkContent = element.querySelector(".value").textContent;
    
    // 创建p容器
    const pContainer = document.createElement('p');
    pContainer.className = 'link';
    
    // 创建a元素并设置属性
    const linkElement = document.createElement('a');
    linkElement.href = linkContent;
    linkElement.textContent = 'Website';
    
    // 组装并替换原元素内部内容
    pContainer.appendChild(linkElement);
    element.innerHTML = '';
    element.appendChild(pContainer);
});

如果需要替换整个.is-field.link元素，可使用以下版本：

const refLinks = document.querySelectorAll('.is-field.link');

refLinks.forEach(function (element) {
    const linkContent = element.querySelector(".value").textContent;
    
    // 创建新的外层div
    const newOuterDiv = document.createElement('div');
    newOuterDiv.className = 'is-field link';
    
    // 创建p容器和a元素
    const pContainer = document.createElement('p');
    pContainer.className = 'link';
    const linkElement = document.createElement('a');
    linkElement.href = linkContent;
    linkElement.textContent = 'Website';
    
    // 组装元素并替换原div
    pContainer.appendChild(linkElement);
    newOuterDiv.appendChild(pContainer);
    element.parentNode.replaceChild(newOuterDiv, element);
});

验证效果 #

修复后运行代码，将生成符合预期的HTML结构，且无控制台错误。

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