Как создавать элементы, устанавливать атрибуты, использовать innerHTML и appendChild с JS и DOM - PullRequest
Новая
       34

Как создавать элементы, устанавливать атрибуты, использовать innerHTML и appendChild с JS и DOM

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

Я пишу пример программы на HTML / JS, чтобы продемонстрировать создание массива определенных пользователем объектов (свойство / значение), создание элемента, добавление данных из массива объектов с использованием innerHTML, а затем добавление вновь заполненного элемента в распечатать его с помощью appendChild ();

По какой-то причине, запуск программы не дает ничего, кроме того, что я жестко кодирую как отладку. Просмотр источника также не очень полезен, учитывая язык.

Пожалуйста, прости меня за простой вопрос, я новичок в JS и провел много часов, читая много ресурсов - я чувствую, что, возможно, упускаю что-то маленькое.

Спасибо !! 

<title>
This is my title.
</title>

<body>
<p>xXx<br/></p>
<script>

var array = new Array();

var thing1 = {
property: "value-1"
};

        var thing2 = {
        property: "value-2"
        };


        array.push(thing1);
        array.push(thing2);

        for (index = 0; index < array.length; ++index) {

            test_el = document.createElement("p");

            test_el.innerHTML(array[index].property);

            document.body.appendChild(test_el);

        };
        //I wish to print 'value' text into the body from my object, that is all

</script>
</body>

1 Ответ

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

Кажется, ваша ошибка связана с innerHTML, это не функция, поэтому вы должны установить это значение равным чему-либо. Я исправил ваш код, чтобы вы могли видеть результат. 

var array = new Array();
var thing1 = {
  property: "value-1"
};
var thing2 = {
  property: "value-2"
};

array.push(thing1);
array.push(thing2);

for (index = 0; index < array.length; ++index) {
  test_el = document.createElement('p');

  test_el.innerHTML = array[index].property;

  document.body.appendChild(test_el);
};
<title>
  This is my title.
</title>

<body>
  <p>xXx<br/></p>
</body>
...