Дублировать div и заполнить из массива
Добрый вечер, есть массив и блок <div> его нужно скопировать и заполнить из контента
<div class="posting">
<div class="head">
last message
</div>
<div class="list-post">
<div class="post">
<div class="author"><a href="#">test1</div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test2</div>
<div id = 'message' class="link"><a href="#">hello1</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test3</div>
<div id = 'message' class="link"><a href="#">hello2</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test4</div>
<div id = 'message' class="link"><a href="#">hello3</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
let list-message =
[{user: "test1", last: "hello"},
{user: "test2", last: "hello2"},
{user: "test3", last: "hello2"},
{user: "test4", last: "hello3"}]
Как это организовать в коде? |
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</div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test2</div>
<div id = 'message' class="link"><a href="#">hello1</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test3</div>
<div id = 'message' class="link"><a href="#">hello2</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test4</div>
<div id = 'message' class="link"><a href="#">hello3</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
<script>
var list = [].map.call( document.querySelectorAll('.post'), function(el) {
return {user : el.querySelector('.author').textContent.trim(),
last : el.querySelector('.link').textContent.trim()}
});
document.write(JSON.stringify(list))
</script>
</body>
</html>
|
Вы наверное меня не так поняли, мне нужно из массива вставить данные в list-post, типо как чат, и блок <div class="post"> должен быть в html 1 раз, а в js создавать такие же блоки и заполнять информацией из массива.
let list-message =
[{user: "name1", last: "welcome1"},
{user: "name2", last: "welcome2"},
{user: "name3", last: "welcome3"},
{user: "name4", last: "welcome4"}]
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="list-post"></div>
<script>
let listMessage =
[{user: "name1", last: "welcome1"},
{user: "name2", last: "welcome2"},
{user: "name3", last: "welcome3"},
{user: "name4", last: "welcome4"}];
listMessage.forEach(el=>{
document.querySelector(".list-post").insertAdjacentHTML('beforeend', `<div class="post">
<div class="author"><a href="#">${el.user}</a></div>
<div id = 'message' class="link">${el.last}<a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>`);
});
</script>
</body>
</html>
|
создание блоков из массива
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>
|
Благодарю, работает, спасибо!
|
Цитата:
|
SpaceAlarm,
Добавить красное clone.querySelector(".author a").textContent = el.user; clone.querySelector(".link a").textContent = el.last; |
Благодарю!
|
Dilettante_Pro,
:thanks: |
| Часовой пояс GMT +3, время: 00:57. |