Создать элемент кнопки в JavaScript - PullRequest
Новая
       14

Создать элемент кнопки в JavaScript

0 голосов
/ 24 июня 2018

Я пытаюсь создать элемент кнопки в javascript без использования jQuery.

Я продолжаю получать сообщение об ошибке при попытке добавить его в DOM.

"Не удается прочитать свойство 'appendChild' of null"

IПосмотрел везде и не мог узнать как создать кнопку.В примере 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.log(element);

Ответы [ 4 ]

0 голосов
/ 24 июня 2018

Вы уверены, что ваш HTML-файл может видеть ваш скрипт.Почему бы не попробовать запустить небольшие тесты в окне консоли.Просмотр вывода этих элементов и посмотреть, дает ли он ноль.

0 голосов
/ 24 июня 2018

Вероятно, что page - это объект, который не определен.Вот скрипка с рабочим примером:

https://jsfiddle.net/2Lon63uj/

0 голосов
/ 24 июня 2018

Ваш скрипт работает до того, как 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.log(element);
 });

// Corected "meta charset =" UTF-8 "".

0 голосов
/ 24 июня 2018

Рабочая демонстрация здесь 

function createButton() {
  var element = document.createElement("button");
  element.appendChild(document.createTextNode("Click Me!"));
  var page = document.getElementById("btn");
  page.appendChild(element);

  console.log(element);
}

createButton();
<div id="btn">
</div>
...