Как отобразить строковый JavaScript в HTML - PullRequest
Новая
       0

Как отобразить строковый JavaScript в HTML

0 голосов
/ 12 февраля 2019

В моем HTML-файле у меня есть div с id = "list".Теперь я хочу отобразить строку из моего JavaScript в моем HTML.стр.но ничего не случилось.В моем 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;

Ответы [ 4 ]

0 голосов
/ 13 февраля 2019

Вот краткий способ сделать это с помощью шаблонных строк.Просто оберните все в функцию, которую вы назначаете 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>
0 голосов
/ 12 февраля 2019

Вам нужно поместить код JavaScript после вашей dom, а также обернуть его тегом 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>

Но это будет НЕ работать, так как JavaScript выполняется до того, как dom рендерится.Также это, вероятно, вызовет ошибку Cannot set property 'innerHTML' of null", потому что getElementById не сможет найти связанный домен. 

<!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>
0 голосов
/ 13 февраля 2019

Всякий раз, когда вы нацеливаетесь на элементы 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;
}
0 голосов
/ 12 февраля 2019

поместите в него свой код, и он будет работать

window.onload = function () {}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...