Создать элемент кнопки в JavaScript
Я пытаюсь создать элемент кнопки в javascript без использования jQuery.
Я все время получаю сообщение об ошибке, когда пытаюсь добавить его в DOM.
"Cannot read property 'appendChild' of null"
Я везде искал и не мог понять, как создать кнопку. В примере с w3Schools они используют функцию для элемента кнопки, который уже был создан в HTML, а я не пытаюсь этого сделать. Вот что у меня есть.
HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Document</title>
<script src = "myapp.js"></script>
</head>
<body>
<div id = "btn">Button Here</div>
</body>
</html>
myapp.js
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.info(element);
он существует как div в моем html
Не похоже, что это так, по крайней мере, во время выполнения скрипта, иначе это не был бы null
Трудно помочь вам, не увидев ваш HTML и JS в действии. Пожалуйста, создайте минимальный воспроизводимый пример.
так что у меня есть div внутри моего html с идентификатором «btn». Я пытаюсь создать элемент кнопки в javascript и добавить эту кнопку в div с идентификатором кнопки. Я знаю, это звучит глупо ... Я просто пытаюсь попрактиковаться и познакомиться с javascript.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Рабочая демонстрация здесь
function createButton() {
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.info(element);
}
createButton();<div id = "btn">
</div>Вероятно, что page - это неопределенный объект. Вот рабочий пример с рабочим примером:
Ваш скрипт выполняется до того, как DOM завершит загрузку, то есть до того, как ваш div 'btn' существует. Есть несколько простых решений. Один из них перемещает ваш тег скрипта в нижнюю часть тела, например:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Document</title>
</head>
<body>
<div id = "btn">Button Here</div>
<script src = "myapp.js"></script>
</body>
</html>
Другое, лучшее решение - добавить строку в ваш скрипт, чтобы убедиться, что HTML-код загружен до запуска скрипта.
document.addEventListener("DOMContentLoaded", function() {
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.info(element);
});
// Corrected "meta charset = "UTF-8"".
Вы уверены, что ваш HTML-файл может видеть ваш скрипт? Почему бы не попробовать запустить небольшие тесты в окне консоли. Просмотрите вывод этих элементов и посмотрите, дает ли он значение null.
function myFunction() {
var btn = document.createElement("BUTTON");
btn.innerHTML = "CLICK ME";
document.body.appendChild(btn);
}<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick = "myFunction()">Try it</button>
</body>
</html>
Похоже,
#btnне существует.