Javascript 动态创建DOM元素的JS或jQuery方法

有人能给我指出一种更容易阅读和扩展的方法吗：

data = {/*very very long json*/};
var inHTML = "";

jQuery.each(data, function(key, value){
    var articleUrl = 'url-to-somewhere';

    var newItem = "<div class='item'><div class='item--poster'><img src='"+data[key].backdropUrl+"' alt='title'/></div><div class='item--content'><h2>"+data[key].title+"</h2><ul><li>"+data[key].productionYear+"</li><li>"+data[key].productionCountry+"</li></ul></div><div class='item--link'><p><a class='' href='"+articleUrl+"'>Lue lisää</a></p></div></div>";
    inHTML += newItem;  

});

jQuery("#container").html(inHTML);

data={/*非常非常长的json*/}；
var inHTML=“”；
每个（数据、函数（键、值）{
var articleUrl='指向某处的url'；
var newItem=“”+数据[key]。title+“
”+数据[key]。productionYear+“
”+数据[key]。productionCountry+”
”；
inHTML+=新项；
});
jQuery（“#container”）.html（inHTML）；

---

我要找的是类似于ng重复Angular的东西。

我打赌使用占位符模板和

.clone（）

。您需要做的是创建一个主DOM，如下所示：

<div id="master-dom" class="item">
  <p><strong>Name</strong> <span class="Name"></span></p>
  <p><strong>Age</strong> <span class="Age"></span></p>
</div>

下一次尝试是，创建一个

#content

区域：

<div id="content"></div>

将上述内容作为数据结构，您可以循环并插入：

$.each(data, function (i, v) {
  // We need the v.
  $("#master-dom").clone()
                  .removeAttr("id")
                  .find(".Name").text(v.name).end()
                  .find(".Age").text(v.age).end()
                  .appendTo("#content");
});

请参见此处的最终输出：

$（函数（）{
风险值数据=[{
“姓名”：“Praveen”，
“年龄”：27
}, {
“姓名”：“Jon Skeet”，
“年龄”：29
}, {
“名称”：“库马尔”，
“年龄”：25岁
}];
$。每个（数据、功能（i、v）{
//我们需要v。
$（“#主dom”）.clone（）
.removeAttr（“id”）
.find（“.Name”）.text（v.Name）.end（）
.find（“.Age”）.text（v.Age）.end（）
.附件（“内容”）；
});
});
*{
保证金：0；
填充：0；
列表样式：无；
}
#主dom{
显示：无；
}
.项目p强{
显示：内联块；
宽度：75px；
}

名称

年龄

我打赌使用占位符模板和
.clone（）
。您需要做的是创建一个主DOM，如下所示：

<div id="master-dom" class="item">
  <p><strong>Name</strong> <span class="Name"></span></p>
  <p><strong>Age</strong> <span class="Age"></span></p>
</div>

下一次尝试是，创建一个
#content
区域：

<div id="content"></div>

将上述内容作为数据结构，您可以循环并插入：

$.each(data, function (i, v) {
  // We need the v.
  $("#master-dom").clone()
                  .removeAttr("id")
                  .find(".Name").text(v.name).end()
                  .find(".Age").text(v.age).end()
                  .appendTo("#content");
});

请参见此处的最终输出：


$（函数（）{
风险值数据=[{
“姓名”：“Praveen”，
“年龄”：27
}, {
“姓名”：“Jon Skeet”，
“年龄”：29
}, {
“名称”：“库马尔”，
“年龄”：25岁
}];
$。每个（数据、功能（i、v）{
//我们需要v。
$（“#主dom”）.clone（）
.removeAttr（“id”）
.find（“.Name”）.text（v.Name）.end（）
.find（“.Age”）.text（v.Age）.end（）
.附件（“内容”）；
});
});
*{
保证金：0；
填充：0；
列表样式：无；
}
#主dom{
显示：无；
}
.项目p强{
显示：内联块；
宽度：75px；
}

名称

年龄

您可以使用ES6功能

你的绳子看起来像这样

var newItem =
    `<div class='item'>
        <div class='item--poster'>
            <img src='${data[key].backdropUrl}' alt='title'/>
        </div>
        <div class='item--content'>
            <h2>${data[key].title}</h2>
            <ul>
                <li>${data[key].productionYear}</li>
                <li>${data[key].productionCountry}</li>
            </ul>
        </div>
        <div class='item--link'>
            <p>
                <a class='' href='${articleUrl}'>Lue lisää</a>
            </p>
        </div>
    </div>`;

var newItem=
`
${data[key].title}

${data[key].productionYear}
${data[key].productionCountry}



`;
您可以使用ES6功能

你的绳子看起来像这样

var newItem =
    `<div class='item'>
        <div class='item--poster'>
            <img src='${data[key].backdropUrl}' alt='title'/>
        </div>
        <div class='item--content'>
            <h2>${data[key].title}</h2>
            <ul>
                <li>${data[key].productionYear}</li>
                <li>${data[key].productionCountry}</li>
            </ul>
        </div>
        <div class='item--link'>
            <p>
                <a class='' href='${articleUrl}'>Lue lisää</a>
            </p>
        </div>
    </div>`;

var newItem=
`
${data[key].title}

${data[key].productionYear}
${data[key].productionCountry}



`;
您可以在这里放置一段非常长的json
作为参考。Praveen Kumar，我认为粘贴在这里不会有任何区别。您可以创建类似
$（''，{“类”：“项”}）的元素。追加（$（''，{“类”：“项--poster”}））
@Shamppi看看我的答案<代码>：）

@PraveenKumar，太棒了！你可以在这里放一段非常长的json作为我们的参考。Praveen Kumar，我不认为粘贴在这里会有任何区别。你可以创建类似

$（''，{“class”：“item”}）的元素。append（$（''，{“class”：“item--poster”}））

@Shamppi看看我的答案<代码>：）@PraveenKumar，太棒了！