Javascript-将DIV元素插入DOM，但不加载

当我查看页面源代码时，我能够将元素插入dom，但是页面没有显示任何内容。查看chrome开发工具中的网络选项卡，jquery、phaser或game.js根本不会请求url的http请求

这里有什么问题吗

这是我试图插入元素的div

<div id="c12" style="width:2px;height:2px;overflow:visible"><div>

下面是getElement代码：

document.getElementById("c12").innerHTML='
                <div id=game>
                  <div id=content>
                  </div>
                  <script src=https://code.jquery.com/jquery-3.5.1.min.js>
                  </script>
                </div>
                <script src=test/js/phaser.min.js></script>
                <script src=test/js/game.js></script>
        '

document.getElementById（“c12”）.innerHTML='1〕
'

但是，如果我在上述代码中的任何地方添加一个图像源，它都可以正常工作，并且我可以在浏览器中看到http请求和图像

---

路径是正确的，因为我可以使用mysite.com/test/js/game.js访问它。

不确定这是否是原因，但将其从“更改为”如下：

document.getElementById("c12").innerHTML=`
                <div id=game>
                  <div id=content>
                  </div>
                  <script src=https://code.jquery.com/jquery-3.5.1.min.js>
                  </script>
                </div>
                <script src=test/js/phaser.min.js></script>
                <script src=test/js/game.js></script>
        `

document.getElementById（“c12”）.innerHTML=`
`

---

原因是“仅包括第一行，而”将允许您包括背面标记中的所有内容

不确定原因是否正确，但将其从“更改为”这样：

document.getElementById("c12").innerHTML=`
                <div id=game>
                  <div id=content>
                  </div>
                  <script src=https://code.jquery.com/jquery-3.5.1.min.js>
                  </script>
                </div>
                <script src=test/js/phaser.min.js></script>
                <script src=test/js/game.js></script>
        `

document.getElementById（“c12”）.innerHTML=`
`

---

原因是“仅将包含第一行”，而“将允许您包含背景标记中的所有内容”

脚本应作为元素插入。下面的解决方案

var script1=document.createElement（'script'）
var script2=document.createElement（'script'）
var script3=document.createElement（'script'）
script1.src=”https://code.jquery.com/jquery-3.5.1.min.js";
script2.src=“test/js/phaser.min.js”；
script3.src=“test/js/game.js”；
document.getElementById（“c12”）.innerHTML=`
`
document.getElementById（'game'）.appendChild（script1）；
document.getElementById（'c12'）.appendChild（script2）；
document.getElementById（'c12'）.appendChild（script3）
脚本应作为元素插入。下面的解决方案


var script1=document.createElement（'script'）
var script2=document.createElement（'script'）
var script3=document.createElement（'script'）
script1.src=”https://code.jquery.com/jquery-3.5.1.min.js";
script2.src=“test/js/phaser.min.js”；
script3.src=“test/js/game.js”；
document.getElementById（“c12”）.innerHTML=`
`
document.getElementById（'game'）.appendChild（script1）；
document.getElementById（'c12'）.appendChild（script2）；
document.getElementById（'c12'）.appendChild（script3）
为什么它会显示任何内容？假设您已将单引号固定到back tick中：它将加载div和脚本。除非这些div中的任何一个具有边框/背景/等和/或脚本产生可见更改。缩进：它将帮助您和任何查看代码的人更好地理解您所做的事情（我在这里为您做了这些）。我推荐learning=设置
innerHTML
的替代方法。如果使用单引号，请在每行末尾添加反斜杠（`\`）。它将创建一个字符串，就像它在一行上一样。为什么它会显示任何内容？假设您已将单引号固定到back tick中：它将加载div和脚本。除非这些div中的任何一个具有边框/背景/等和/或脚本产生可见更改。缩进：它将帮助您和任何查看代码的人更好地理解您所做的事情（我在这里为您做了这些）。我推荐learning=设置
innerHTML
的替代方法。如果使用单引号，请在每行末尾添加反斜杠（`\`）。它将创建一个字符串，就好像它在一行上一样。抓到这个很好！我对你的答案投了赞成票，编辑了缩进以与我对问题的缩进编辑保持一致，建议提问者查看
document.createElement
。很好地理解了这一点！我对你的答案投了赞成票，编辑了缩进以与我对问题的缩进编辑保持一致，建议提问者查看
document.createElement
。