Переписала сюда код для надежности
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#selectedNews {
border : 1px solid gray;
margin : 10px;
padding : 5px;
}
.news{
background-color : green;
border : 2px solid black;
padding : 4px;
margin-top : 2px;
text-align : center;
}
</style>
<script>
var newsListData = [
{
"group" : "science",
"title" : "Текст тут",
"image" : "images/news1.jpg",
"content" : "Много текста."
},
{
"group" : "science",
"title" : "Название",
"image" : "images/news2.jpg",
"content" : "Очень много текста"
},
{
"group" : "science",
"title" : 'Название',
"image" : "images/news3.jpg",
"content" : "Много текста"
},
{
"group" : "economics",
"title" : 'Еще название',
"image" : "images/news4.jpg",
"content" : "Очень много текста"
}]
var selected;
function showMore() {
// пустой элемент selected
selected.innerHTML = "";
// потомок элемента, на которого наведена мышь
for (var i = 0; i < this.children.length; i++) {
// клонирую элементы и отправляю в selected
selected.appendChild(this.children[i].cloneNode(true));
}
}
// элементы к показу
document.addEventListener("DOMContentLoaded", function() {
// Выбор элементов
var selectedNews = newsListData;
for (var i = 0; i < selectedNews.length; i++) {
// Добавляю listeners
selectedNews[i].addEventListener("click", showMore);
}
selected = document.getElementById("selectedNews")
});
</script>
</head>
<body>
<div id="newsList">
<input type="text" placeholder="filter..." id="filter"/>
<div class="list">
<div id="0-news" class="news">One</div>
<div id="1-news" class="news">Two</div>
<div id="2-news" class="news">Three</div>
<div id="3-news" class="news">Last one</div>
<article id="selectedNews">
<h1>Titre</h1>
<figure>
<img src="" alt="titre"/>
</figure>
<div id="content">
bla bla
</div>
</article>
</body>
</html>