在前端开发中，我们经常需要动态地向页面添加一些 JavaScript 代码。最简单的方式是使用<script>元素来引入外部脚本文件或者直接嵌入 JavaScript 代码。不过，有些情况下，我们需要避免直接向页面中添加<script>元素，比如在某些严格的安全环境下，或者是为了更好的性能和可维护性。
问题分析
为什么不能追加<script>元素呢？这是因为浏览器会在解析 HTML 时，立即执行遇到的<script>标签中的 JavaScript 代码。如果我们后续再插入<script>元素，那么新插入的代码将无法被执行。因此，我们需要找到其他的解决方案。
解决方案
1. 使用eval()方法
eval() 方法可以将传递进去的字符串作为 JavaScript 代码来执行。因此，我们可以将要添加的 JavaScript 代码以字符串形式传递给eval()方法。
const scriptStr = 'alert("Hello, world!");';
eval(scriptStr);但是，使用eval()存在一些安全风险，因为它可以执行任何代码，包括恶意代码，而且也可能会因为代码错误导致整个应用崩溃。因此，我们需要谨慎使用eval()方法。
2. 使用Function()构造函数
与eval()类似，Function()构造函数也可以将传递进去的字符串作为 JavaScript 代码来执行。不同的是，Function()会创建一个新的函数对象，而eval()会将代码直接放在当前作用域中执行。
const scriptStr = 'alert("Hello, world!");';
const fn = new Function(scriptStr);
fn();同样地，使用Function()也存在安全风险，因为它也能够执行任何代码。但是，相比于eval()，它提供了更好的隔离性和安全性。
3. 使用动态创建script标签
虽然不能直接向页面添加<script>元素，但是我们可以通过 JavaScript 动态创建script标签，并将要添加的 JavaScript 代码以src属性或者text属性的方式传递给它。
const scriptEl = document.createElement('script');
scriptEl.src = 'https://example.com/script.js'; // 从外部引入脚本文件
// scriptEl.text = 'alert("Hello, world!");'; // 直接插入 JavaScript 代码
document.head.appendChild(scriptEl);这种方式最大的优点是允许浏览器自行缓存和处理 JavaScript 代码，从而提高性能和可维护性。但是，由于涉及到网络请求和资源加载，因此可能会存在一些时间上的延迟。
总结
不能追加<script>元素不意味着我们无法动态地向页面添加 JavaScript 代码。上述三种解决方案各有优劣，根据实际需求和安全性要求选择合适的方案即可。
参考代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------------------
-------
------
------- ------------- ---------- -----------
--------
-- -- ------ -- ---------- --
----- --------- - -------------- -----------
-------------------------------------------------------- -- -- -
----------------
---
-- -- ---------- -- ---------- --
----- ---------- - -------------------- -----------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------