JavaScript 使用 ID 创建元素

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

试试下面的代码：

        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); 
            }

Answer 2

在 for 循环定义中将 int 替换为 var。
将新元素分配给变量，例如 new_p.
使用 textContent() 函数为您的元素设置文本内容。
最后使用 appendChild() 函数将新段落 new_p 添加到您的正文中。

希望对您有所帮助。

片段

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

for (var i = 0; i < employees.length; i++)
{
    var new_p = document.createElement("p");

    new_p.textContent = employees[i].firstName + " " + employees[i].lastName;

    document.body.appendChild(new_p);
}

Answer 3

好的，在阅读了此处的评论和答案并进行了更多研究后，我找到了解决方案并且 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 4

这是一种现代方法：

首先，定义一个函数以根据元素数组创建 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
)));

JavaScript 使用 ID 创建元素

JavaScript createElement with ID

javascript

json

createelement

片段