SpaceAlarm,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="list-post">
<div class="post">
<div class="author"><a href="#">test1</a></div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
<script>
var list = [{
user: "name1",
last: "welcome1"
}, {
user: "name2",
last: "welcome2"
}, {
user: "name3",
last: "welcome3"
}, {
user: "name4",
last: "welcome4"
}];
var parent = document.querySelector(".list-post"),
template = parent.removeChild(parent.querySelector(".post")),
content = document.createDocumentFragment();
list.reduce(function(content, el) {
var clone = template.cloneNode(true);
clone.querySelector(".author").textContent = el.user;
clone.querySelector(".link").textContent = el.last;
content.appendChild(clone);
return content;
}, content);
parent.appendChild(content);
</script>
</body>
</html>
|