Question

我正在尝试将每个属性（名字，姓氏和信誉）放入单独的div中单独的p标签中。我设法将它们放入单独的div中，但似乎仍然无法将每个属性放在单独的p标签中，而是看起来像这样。

我的结果：

JasonVorheesFriday the 13th

FreddyKruegerA Nightmare on Elm Street

RogerRabbitWho Framed Roger Rabbit

KevinMcCallisterHome Alone

GodzillaKing of The MonstersGodzilla

BuzzLightyearToy Story

MarionCobrettiCobra

我的代码：

var people =[
        {first:"Jason", last:"Vorhees", credit:"Friday the 13th"},
        {first:"Freddy", last:"Krueger", credit:"A Nightmare on Elm Street" },
        {first:"Roger", last:"Rabbit", credit:"Who Framed Roger Rabbit" },
        {first:"Kevin", last:"McCallister", credit:"Home Alone" },
        {first:"Godzilla", last:"King of The Monsters", credit:"Godzilla" },
        {first:"Buzz", last:"Lightyear", credit:"Toy Story" },
        {first:"Marion", last:"Cobretti", credit:"Cobra" }
    ]

    var body = document.querySelector('body');

    for(let i=0; i<people.length; i++)
    {
        var tempDiv;
        var tempDiv = document.createElement('div');
        var p = document.createElement('p');
        var first = document.createTextNode(people[i].first);
        var last = document.createTextNode(people[i].last);
        var credit = document.createTextNode(people[i].credit);

        p.appendChild(first);
        p.appendChild(last);
        p.appendChild(credit);
        p.appendChild(tempDiv);
        body.appendChild(tempDiv);
        body.appendChild(p);
        tempDiv.appendChild(p);

    }

需要在单独的段落中输入姓名和姓名，例如：

Jason
Vorhees
Friday the 13th

Freddy 
Krueger
A Nightmare on Elm Street

Answer 1

我倾向于将String.replace和element.innerHTML用于这样的简单页面构建例程。考虑以下代码段...

var people = [
    {first:"Jason", last:"Vorhees", credit:"Friday the 13th"},
    {first:"Freddy", last:"Krueger", credit:"A Nightmare on Elm Street" },
    {first:"Roger", last:"Rabbit", credit:"Who Framed Roger Rabbit" },
    {first:"Kevin", last:"McCallister", credit:"Home Alone" },
    {first:"Godzilla", last:"King of The Monsters", credit:"Godzilla" },
    {first:"Buzz", last:"Lightyear", credit:"Toy Story" },
    {first:"Marion", last:"Cobretti", credit:"Cobra" }
];

/* create String templates of HTML-tags */
var div = '<div class="border" id="%%ID%%">%%TXT%%</div>';
var para = "<p>%%TXT%%</p>";
/* variable to hold output String */
var html = "";

/* loop through 'people' array */
people.forEach(function(n, i) {
    /* 'n' = each item in 'people' array
       'i' = index of 'n' */

    /* build paragraphs as Strings
       on temporary variable 'p' */
    let p = para.replace("%%TXT%%", n.first);
    p += para.replace("%%TXT%%", n.last);
    p += para.replace("%%TXT%%", n.credit);

    /* add paragraphs to div */
    html += div.replace("%%TXT%%", p).replace("%%ID%%", i);
});

/* insert 'html' into document body */
document.body.innerHTML = html;

.border {
    padding:0 1em;
    border:1px solid #888;
    margin-bottom:0.5em;
}
.border p:last-of-type {
    font-style:italic;
}

<!DOCTYPE html>
<html>
<body>
</body>
</html>

这种基于字符串的方法有时比使用document.createElement()并使用element.appendChild()等嵌套多个元素更快，更简单-尽管在向元素添加事件功能时会使用.appendChild我正在创建。

希望能有所帮助，如果/当您再次发帖时，请牢记有关格式正确的问题的评论-这仅意味着您可以更快地获得更好的答案。：D

如何将数组中的属性放入单独的<p>标记中

1 个答案: