JavaScript создает div динамически - PullRequest
Новая
       5

JavaScript создает div динамически

1 голос
/ 16 октября 2011

Я пытался создать функцию для создания div и стилизации, вот код: http://jsfiddle.net/NGnEd/5/.

<script type="text/javascript">
var dom = {

    // Build the main button
    buildButton: function(){

        // Create new DOM element - div
        var button = document.createElement('div');

        // Set element attribute
        button.setAttribute('id', 'newElement');

        // Style the element
        button.style.width = "100px";
        button.style.height = "100px";

        // Add content
        button.innerHTML = 'new Element';

        // Print element
        document.body.innerHTML += button;
    }
}
</script>

<div onclick="dom.buildButton();">
   The first div
</div>

Предполагается создать элемент, стилизовать его, добавить контент и распечататьЭто.Но это не работает, я не знаю причину.

Любая помощь?

1 Ответ

4 голосов
/ 16 октября 2011

Вы не можете добавить элемент HTML в строку.Вместо 

document.body.innerHTML += button;

Попробуйте 

document.body.appendChild(button);

Кроме того, как отмечает @Felix Kling, вы неправильно настроили JSFiddle, поэтому onclick="dom.buildButton" не работает.Рабочий пример здесь:

http://jsfiddle.net/pnHRp/1/

...