Добавление к телу с помощью JavaScript

Question

Добавление к телу с помощью JavaScript

0

У меня есть задание сделать несколько ошибок на экране случайным образом, но у меня возникают проблемы с добавлением divs в тело html через javascript.

<head>
<title>Fly little bug! Fly!</title>

<script type="text/javascript">
/* <![CDATA[ */
var numBugs = 0;
var body = document.getElementsByTagName("body");
function bug(startX, startY, xSpeed, ySpeed){
  var self = this;
  this.xPos = startX;
  this.yPos = startY;
  this.xSpeed = xSpeed;
  this.ySpeed = ySpeed;
  this.divId = "bug" + numBugs;

  this.div = document.createElement("div");

  this.div.innerHTML = "test";

  body.appendChild(self.div);

  this.fly = function(){
    self.xPos += self.xSpeed;
    self.yPos += self.ySpeed;
  }
  this.fly();
  this.flyInterval = setInterval(function(){ self.fly(); },5000);
  numBugs++;
}

/* ]]> */
</script>
</head>

<body onload = "var bug1 = new bug(10, 20, 5, 3);">

</body>
</html>

donsavage 17 апр. 2014, в 01:13

Источник

1

Совет: Каждый метод DOM, который содержит слово «Элементы» (обратите внимание на s в конце? Plural!), Возвращает список узлов DOM, а не один узел DOM.
Felix Kling 16 апр. 2014, в 22:59

Теги:

javascript

html

2 ответа

1

document.body.innerHTML += '<div>Div Content</div>';

Посмотрите на jQuery, если вы хотите упростить простые манипуляции с DOM.

Thad Blankenship 16 апр. 2014, в 21:31

Ещё вопросы

Совет: Каждый метод DOM, который содержит слово «Элементы» (обратите внимание на s в конце? Plural!), Возвращает список узлов DOM, а не один узел DOM.

Tmdean · Accepted Answer · 2014-04-16T21-43-00.000Z

Я вижу две проблемы.

Функция getElementsByTagName возвращает массив элементов. Вы должны быть явным, чтобы вам нужен первый элемент массива.
```
var body = document.getElementsByTagName("body")[0];
```
Вы, по сути, говорите: "Дайте мне все теги в документе типа" тело ". Он дает вам список тегов, и вы должны получить первый, хотя в любом документе HTML должно быть только одно "тело". [0] в коде выше дает вам первый.
Вы пытаетесь получить доступ к телу до его создания. <Script> встречается в документе перед тегом <body>, поэтому во время выполнения скрипта тело не существует. Вам нужно переместить вызов getElementsByTagName внутри функции bug().

Я добавил в [0], и он все еще не работал. Я также добавил сообщения alert () до и после строки: body.appendChild (self.div); работал только первый, так что я знаю, что это ошибка.
Отредактированный ответ. Я думаю, что нашел другую ошибку.