Question

我正在创建一个包含3个元素的JavaScript数组：

var employees =
    [
        {"firstName":"John", "lastName":"Doe"},
        {"firstName":"Anna", "lastName":"Smith"},
        {"firstName":"Peter", "lastName":"Jones"}
    ]

我想使用for循环来遍历数据。这是for循环：

for (int i = 0; i < employees.length; i++)

我想为每个对象创建一个新的<p>，并将数据放在新的<p>中。我相信我需要为每个<p>分配一个ID。我怎么做到这一点？

到目前为止的完整代码：

<!DOCTYPE html>
<html>
    <body>
        <h2>JSON Java Syntax Examples</h2>
<!--        <p id="demo"></p>-->

        <script>
            var employees =
                [
                    {"firstName":"John", "lastName":"Doe"},
                    {"firstName":"Anna", "lastName":"Smith"},
                    {"firstName":"Peter", "lastName":"Jones"}
                ]

            for (int i = 0; i < employees.length; i++)
                {
                    document.createElement("p");
                    document.getElementById(i).innerHTML = employees[i].firstName + " " + employees[i].lastName;
                }
//            document.getElementById("demo").innerHTML = employees[0].firstName + " " + employees[0].lastName;
        </script>
    </body>
</html>

Answer 1

将<link href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css" rel="stylesheet"/> <script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>替换为int in for loop definition。
将新元素分配给变量，例如var。
使用new_p功能为您的元素设置文字内容。
最后使用textContent()函数将新段new_p附加到您的身体。

希望这有帮助。

段

appendChild()

Answer 2

好的，在阅读了这里的评论和答案，并做了一些更多的研究后，我找到了解决方案并且它100％有效。我没有为任何新创建的元素分配ID。我使用innerHTML将数据添加到元素，然后使用appendChild将标记添加到文档中。

以下是工作代码：

<!DOCTYPE html>
    <html>
        <body>
            <h2>JSON Java Syntax Examples</h2>

            <script>
                var employees =
                    [
                        {"firstName":"John", "lastName":"Doe"},
                        {"firstName":"Anna", "lastName":"Smith"},
                        {"firstName":"Peter", "lastName":"Jones"}
                    ]

                for (var i = 0; i < employees.length; i++)
                    {
                        var p = document.createElement("p");
                        p.innerHTML = employees[i].firstName + " " + employees[i].lastName;
                        document.body.appendChild(p);
                    }
    //            document.getElementById("demo").innerHTML = employees[0].firstName + " " + employees[0].lastName;
            </script>
        </body>
    </html>

感谢所有回复！

Answer 3

这是一种现代方法：

首先，定义一个函数，根据元素数组创建DOM文档片段。可以构建DOM片段并一次性插入DOM。在一个简单的例子中，它没有任何区别，但是如果有很多DOM操作正在进行中它会更快。

function createFragment(arr) {
  return arr.reduce(r, e) {
    r.appendChild(e);
    return r;
  }, document.createDocumentFragment());
}

编写函数以将特定员工的数据转换为p元素：

function makeElt(emp) {
  var text = document.createTextNode(emp.firstName + ' ' + emp.lastName);
  var p = document.createElement('p');
  p.appendChild(text);
  return p;
}

有了这些部分，我们只需要写：

document.body .                 // To the document body,
  appendChild (                 // append
    createFragment (            // the fragment containing
      employees .               // all of the employees
        map (                   // transformed into
          makeElt               // a DOM element
)));

Answer 4

尝试以下代码：

        for (int i = 0; i < employees.length; i++)
            {
                var pObj = document.createElement("p");
        var t = document.createTextNode(employees[i].firstName + " " + employees[i].lastName); 
                pObj.appendChild(t);
        document.body.appendChild(pObj); 
            }

带有ID的JavaScript createElement

4 个答案:

段