点击按钮时如何用输入框内容替换class为special的段落？

需求：点击按钮时，将页面中所有class为special的段落内容替换为输入框中的文本。

尝试的代码如下：

<body>
<input type="text" id="txtElement">
<button id="btnKnop1">Vervang tekst</button>
<div id="divResult">
    <p class="special">Alinea 1</p>
    <p class="special">Alinea 2</p>
    <p class="special">Alinea 3</p>
    <p>ALinea 4</p>
    <p>Alinea 5</p>
</div>
<script type="text/javascript">
    window.addEventListener('load', () => {
        document.getElementById('btnKnop1').addEventListener('click', () => {
            let OldElement = document.getElementsByClassName('special')
            let newElement = document.createElement('p');
            let node = document.getElementById('txtElement').value;
            let newNode = document.createTextNode(node)
            newElement.appendChild(newNode)
            console.log(newElement)
            document.getElementById('divResult').replaceChild(newElement, OldElement)
        })
    })
</script>
</body>

代码错误分析 #

• getElementsByClassName('special')返回的是HTMLCollection动态集合，包含所有匹配的元素，而replaceChild方法只能接收单个节点作为第二个参数，直接传入集合会导致运行错误。
• 原代码逻辑是创建新的<p>元素去替换，但需求核心是替换已有段落的文本内容，无需重新创建元素（额外创建属于冗余操作）。

解决方案 #

方案1：直接修改段落文本内容（推荐） #

无需创建新元素，直接遍历所有目标段落，修改它们的文本内容即可：

<body>
<input type="text" id="txtElement">
<button id="btnKnop1">Vervang tekst</button>
<div id="divResult">
    <p class="special">Alinea 1</p>
    <p class="special">Alinea 2</p>
    <p class="special">Alinea 3</p>
    <p>ALinea 4</p>
    <p>Alinea 5</p>
</div>
<script type="text/javascript">
    window.addEventListener('load', () => {
        document.getElementById('btnKnop1').addEventListener('click', () => {
            // 获取输入框文本
            const newText = document.getElementById('txtElement').value;
            // 将动态集合转为数组，避免遍历过程中集合变化
            const specialParagraphs = Array.from(document.getElementsByClassName('special'));
            // 遍历替换每个段落的文本
            specialParagraphs.forEach(para => {
                para.textContent = newText;
            });
        })
    })
</script>
</body>

方案2：替换整个段落元素（如需替换元素本身） #

如果需要将原有的<p class="special">替换为新的元素（比如保留类名），可以逐个遍历替换：

<body>
<input type="text" id="txtElement">
<button id="btnKnop1">Vervang tekst</button>
<div id="divResult">
    <p class="special">Alinea 1</p>
    <p class="special">Alinea 2</p>
    <p class="special">Alinea 3</p>
    <p>ALinea 4</p>
    <p>Alinea 5</p>
</div>
<script type="text/javascript">
    window.addEventListener('load', () => {
        document.getElementById('btnKnop1').addEventListener('click', () => {
            const newText = document.getElementById('txtElement').value;
            // 转为数组锁定元素集合
            const oldElements = Array.from(document.getElementsByClassName('special'));
            
            oldElements.forEach(oldPara => {
                // 创建新段落并保留类名
                const newPara = document.createElement('p');
                newPara.className = 'special';
                newPara.textContent = newText;
                // 替换单个元素
                oldPara.parentNode.replaceChild(newPara, oldPara);
            });
        })
    })
</script>
</body>

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