在我的HTML文件中，我有一个id =“list”的div。 现在我想在我的html中显示我的javascript中的字符串。 页。 但是没有发生。 在我的html文件中，我导入了srcipt文件。 以下是我在脚本文件中的外观：

var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];

var list = namesArray.map(name=>"<li>"+name+"</li>");
var listAsStr ="<ul>" + list.join("") + "<ul>";
document.getElementById("list").innerHTML = listAsStr;

把你的代码放在这里，它会工作

window.onload = function（）{}

每当你定位DOM元素时（即你想使用document.getElementById("my-element")或类似的东西），你需要首先检查文档是否已加载。

您可以通过以下任一方式执行此操作：

window.onload = function(){
  //Now that the window has loaded we can target DOM elements here
}

要么

document.addEventListener('DOMContentLoaded', function () {
  //Now that the contents of the DOM have loaded we can target DOM elements here
});

因此，一个完整的示例（将您的脚本代码放在外部文件中，即list.js ）将如下所示：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8">
<title>My list website</title>
<script src="list.js"></script>
</head>
<body>
  <div id="list"></div>
</body>
</html>

list.js

window.onload = function(){
    //We use window.onload to check the window has loaded so we can target DOM elements
    var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];
    var list = namesArray.map(name=>"<li>"+name+"</li>");
    var listAsStr ="<ul>" + list.join("") + "<ul>";
    document.getElementById("list").innerHTML = listAsStr;
}

你需要在你的dom之后放置JavaScript代码，并用Script标签包装。

示例：这将起作用，因为我们首先渲染HTML然后将js执行到其中。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This Will WorK</title> </head> <body> <div id="list" ></div> <script> var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"]; var list = namesArray.map(name=>"<li>"+name+"</li>"); var listAsStr ="<ul>" + list.join("") + "<ul>"; document.getElementById("list").innerHTML = listAsStr; </script> </body> </html>

但由于DOM渲染前正在执行的JavaScript这是不行的。 此外，这可能会引发错误Cannot set property 'innerHTML' of null"因为getElementById将无法找到关联的dom。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This Will Not WorK</title> </head> <body> <script> var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"]; var list = namesArray.map(name=>"<li>"+name+"</li>"); var listAsStr ="<ul>" + list.join("") + "<ul>"; document.getElementById("list").innerHTML = listAsStr; </script> <div id="list" ></div> </body> </html>

这是使用模板字符串完成它的简洁方法。 只需将所有内容包装到您为window.onload分配的函数中：

 <script> window.onload = () => { const namesArray = ['lars', 'bo', 'ib', 'peter', 'jan', 'frederik']; const list = `<ul>${namesArray.map(name => `<li>${name}</li>`).join('')}</ul>`; document.getElementById('list').innerHTML = list; }; </script> <div id="list"></div>

如何在HTML中显示字符串javascript 的index.html list.js

问题描述

1楼

2楼

的index.html

list.js

3楼

4楼