How to display a string javascript in HTML
Question
In my HTML file I have a div with id="list". Now I want to display a string from my javascript in my html. page. but nothning happen. In my html file, i've imported the srcipt file. Here's how it looks in my script file:
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;
4 answers
solution1
2 2019-02-12 20:52:23
place your code in this and it will work
window.onload = function() {}
solution2
1 2019-02-12 21:01:52
Whenever you're targeting DOM elements (ie you want to use document.getElementById("my-element") or similar) you need to first check if the document has loaded.
You can do this in either of the following ways:
window.onload = function(){
//Now that the window has loaded we can target DOM elements here
}
OR
document.addEventListener('DOMContentLoaded', function () {
//Now that the contents of the DOM have loaded we can target DOM elements here
});
So a full example (putting your script code in an external file ie list.js ) would look like this:
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;
}
solution3
0 ACCPTED 2019-02-12 20:54:46
You need to put the JavaScript code after your dom and also wrapped with Script tag.
Example: This will work since we rendered the HTML first and then executed the js into it.
<!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>
But this will NOT work since the JavaScript is being executed before dom rendered. Also this will probably throw an error Cannot set property 'innerHTML' of null" because getElementById will not be able to find the associated 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>
solution4
0 2019-02-12 21:06:58
Here is a succinct way to do it with template strings. Just wrap everything in a function you assign to 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.