我正在尝试自学如何使用JavaScript修改DOM。 我对下面的事情一头雾水。
这是一个HTML片段。
<html>
<body>
<h1>A heading</h1>
<div id="myDIV"></div>
<script type="text/javascript" src="thejs.js"></script>
<script type="text/javascript">
document.getElementById("myDIV").innerHTML="<p>Try this one comes from script inside html source</p>"
</script>
</body>
</html>
我期望从脚本中链接的外部js文件中得到类似的结果，该文件包含如下内容:
document.getElementById("myDIV").innerHTML="<p>While this one comes from a separate JS file</p>";
但什么都没发生。。。 我知道这可能很傻，我道歉。
第一个脚本运行并将div的内容设置为“而这一个来自单独的…”
然后，在一段时间之后（这对人类来说是不可察觉的），传递第二个脚本运行并将div的内容设置为“try this one come from script…”。
如果希望两个段落都出现，则需要追加（例如，用+=)数据，而不是替换它。
也就是说，用innerHTML+=附加HTML块可能会导致一些问题（它的效率很低，因为需要重新生成整个DOM卡盘，并且会破坏内联事件处理程序），因此通常使用insert邻接TML方法会更好。
输出取决于您将外部JS包含在何处。 如果您已经将它包含在您的嵌入脚本之前，它将不会有任何影响，因为最终，它将被您的嵌入脚本覆盖。 但是，如果您在嵌入式js之后包含外部js，它将按您想要的方式工作。
<html>
<body>
<h1>A heading</h1>
<div id="myDIV"></div>
<script type="text/javascript" src="thejs.js"></script>
<script type="text/javascript">
document.getElementById("myDIV").innerHTML="<p>Try this one comes from script inside html source</p>"
</script>
<script type="text/javascript" src="external.js"></script>
</body>
</html>
