如何使用JS和DOM创建元素,设置属性,使用innerHTML和appendChild

时间:2019-01-11 21:28:47

标签: javascript html dom innerhtml appendchild

我正在用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 :(得分:5)

您的错误似乎出在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>