javascript 无法附加到 docmap div 标签的末尾？

我想知道为什么我的 javascript 无法附加到 docmap div 标记的末尾？至少我在 Chrome 中尝试过，但没有看到它说:“一些新内容!”在 docmap div 标签中。

<html>
<header>
<style>
#docmap {
  background-color: #f0f0f0;
  height: 100%;
  width: 200px;
  position: fixed; 
}
#main {
  margin-left: 200px;
  position: 200px; 
  padding: 20px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
    //alert("hey!");
    var docmap = $("#docmap");
    docmap.append('<br>Some new content!');
</script>
</header>

<body>

<div id="docmap">
<ul>
<li> hello
<li> hi
<li> howdy
</ul>
</div>

<div id="main">
<h1>header1</h1>
<h2>header2 a</h2>
<h2>header2 b</h2>
<h1>header1 a</h1>
</div>

</body>
</html>

最佳答案

在 <html>标签，你应该使用 <head> 。 <header>是用于其他目的的标签。此外，您还必须在声明要使用 JQuery 调用的标记之后将脚本移动到正文底部。

Try it Online!或直接在这里:

    //alert("hey!");
var docmap = $("#docmap");
docmap.append('<br>Some new content!');

#docmap {
  background-color: #f0f0f0;
  height: 100%;
  width: 200px;
  position: fixed; 
}
#main {
  margin-left: 200px;
  position: 200px; 
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="docmap">
<ul>
<li> hello
<li> hi
<li> howdy
</ul>
</div>

有一个关于<head>的问答与 <header> : <header> vs. <head>

如果您想知道将 <script> 放在哪里标签，好吧，SO 支持你:

关于javascript 无法附加到 docmap div 标签的末尾？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60058807/

javascript 无法附加到 docmap div 标签的末尾？

上一篇：javascript - 单击省略号时展开和缩小

下一篇：javascript - Puppeteer:按 ID 选择的输入字段返回未定义