点击按钮重复带输入框和JS函数的HTML容器，script标签不生效如何解决

问题根因 #

• 浏览器出于安全策略限制，通过innerHTML属性插入的<script>标签不会被解析执行，这是你插入的脚本不生效的核心原因
• 你重复生成的元素使用了固定idmyInput，DOM规范要求id全局唯一，document.getElementById()只会返回页面中第一个匹配id的元素，即使脚本生效，后续生成的输入框也无法正常运行
• 同一份工具函数不需要重复定义，全局声明一次即可被所有元素调用

修正实现方案 #

<div class="Container">
    <div class="inputContainer">
        <p>Name: </p>
        <!-- 事件触发时直接传入当前元素本身，无需依赖id查找 -->
        <input type="text" oninput="DisplayInputText(this)">
    </div>
</div>
<!-- 你原有代码里缺失的输出节点，补充上 -->
<p id="demo"></p>
<button id="btn">Repeat Container</button>

<script>
    // 函数全局定义一次，所有生成的输入框都可以复用
    function DisplayInputText(currentInput) {
      const inputValue = currentInput.value;
      document.getElementById("demo").innerHTML = inputValue;
    }

    // 容器模板仅保留HTML结构，不需要重复插入script标签
    const containerTemplate = `
    <div class="container">
        <p>Name: </p>
        <input type="text" oninput="DisplayInputText(this)">
    </div>
    `;

    document.getElementById("btn").addEventListener("click", function() {
        const newContainer = document.createElement('div');
        // 不要给动态生成的多个元素设置固定id，改用类名标识
        newContainer.classList.add('dynamic-generated-container');
        newContainer.innerHTML = containerTemplate;
        document.body.appendChild(newContainer);
    })
</script>

额外说明 #

如果有必须动态插入脚本的场景，不要用innerHTML拼接script标签，可以通过document.createElement('script')创建脚本元素，设置内容后手动插入DOM，这类方式生成的脚本会被浏览器正常执行。

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