通过eval加载Script1.js后，MainScript.js创建的HTML标签消失，求原因？

核心问题 #

问题出在document.write的执行规则上：

• 页面正在解析过程中调用document.write，会正常向文档流追加内容；
• 但页面解析完成后再调用document.write，浏览器会直接清空整个现有文档，再写入新内容。

你的代码里：

1. MainScript的同步代码执行时，页面还在解析，所以document.write("<br>")和添加的<span id="mainscript">都能正常显示；
2. 但loadScript是异步函数，它要等MainScript同步代码跑完、页面解析完成后，才会加载并执行Script1；
3. 这时候Script1里的document.write("<br>")触发了文档清空，之前所有内容（包括MainScript加的span、初始的<div id="main">）都被删掉，最后只剩Script1添加的内容。

修复方案 #

把两处的document.write替换成DOM追加操作，避免触发文档清空：

修改后的MainScript.js

const loadScript = async(url) => {
    const response = await fetch(url)
    const script = await response.text()
    eval(script)
}
var s = document.createElement("span");
// 用DOM创建换行并追加，替代document.write
document.body.append(document.createElement("br"));
s.innerText="This is main script";
s.id="mainscript";
document.body.append(s);

const scriptUrl_1 = "js/recursion_linear/Script1.js"
loadScript(scriptUrl_1)

修改后的Script1.js

// 用DOM创建换行并追加，替代document.write
document.body.append(document.createElement("br"));
var s = document.createElement("span");
s.innerText="This is Script1";
s.id="script1";
document.body.append(s);

这样修改后，所有内容都是向已存在的DOM中追加，不会清空文档，就能同时显示两个文本了。

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