如何向HTML的script标签追加函数？解决函数未定义问题

你直接将函数字符串追加到已加载完成的<script>标签中时，浏览器不会重新解析这段新添加的代码，导致amb函数并没有被注册到全局作用域，所以点击按钮调用时会提示“函数未定义”。

方法1：创建新的<script>元素插入DOM（推荐） #

这是最符合浏览器解析逻辑、安全可靠的方式，浏览器会自动执行新<script>中的代码：

<script>
    const funcCode = `function amb() { console.log('hello')}`;
    const newScript = document.createElement('script');
    newScript.textContent = funcCode;
    document.body.appendChild(newScript);
</script>
<div id="a">
    <button onclick="amb()">amb</button>
</div>

方法2：重新触发原有<script>标签的解析 #

如果你一定要复用原来的append_here标签，可以通过替换标签的方式让浏览器重新解析内容：

<script id="append_here">
    // the appended function goes in this script
</script>
<script>
    const a = `function amb() { console.log('hello')}`;
    const targetScript = document.getElementById('append_here');
    // 合并原有内容与新代码
    targetScript.textContent += a;
    // 创建新script替换原标签，触发解析
    const newScript = document.createElement('script');
    newScript.textContent = targetScript.textContent;
    targetScript.parentNode.replaceChild(newScript, targetScript);
</script>
<div id="a">
    <button onclick="amb()">amb</button>
</div>

方法3：使用eval（不推荐） #

如果代码字符串完全由你控制，也可以用eval直接执行，但这种方式存在安全风险（若字符串来源不可信，可能注入恶意代码）：

<script>
    const a = `function amb() { console.log('hello')}`;
    eval(a);
</script>
<div id="a">
    <button onclick="amb()">amb</button>
</div>

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