AppendChild при каждой иттерации заменять добавленыый тег

[Jucamba]

var area = document.querySelector('#posts');

for (var i = 1; i <= localStorage.length; i++) {
      var articleTemplate = document.querySelector('#post').innerHTML;
      var article = document.createElement('article');

      articleTemplate = articleTemplate.replace('{{title}}', JSON.parse(localStorage.getItem('object' + [i])).title);
      articleTemplate = articleTemplate.replace('{{body}}', JSON.parse(localStorage.getItem('object' + [i])).body);
      
      var tags = JSON.parse(localStorage.getItem('object' + [i])).tags;

      var tagButton = document.createElement('button');
      tagButton.className = 'btn btn-xs btn-default';

      // создаем разметку
      article.setAttribute('id', [i]);
      article.innerHTML = articleTemplate;
      area.appendChild(article);

      var tagContainer = article.querySelector('.tags');

      for (var j = 0; j < tags.length; j++) {
        tagButton.textContent = tags[j];
        tagContainer.appendChild(tagButton);
      }
      
    }

мы создаем разметку выводим ее на страницу, потом в это разметке находим обертку и создаем перемнную tagContainer и я хочу в эту обертку запихать несколько кнопок с тегами. На каждой иттерации цикла 'j' кнопка заменяет предыдущую, почему так происходит и как исправить?

[destus]

Потому что в DOM дереве не может существовать двух одинаковых указателей на один и тот же элемент на одном уровне вложенности. 12 и 13 строчку в цикл.

[Jucamba]

Афигеть все работает, Спасибо! но я нифига не понял почему))) можешь дать больше инфы, объяснить или скинуть полезную ссылку?

[destus]

Афигеть все работает, Спасибо! но я нифига не понял почему))) можешь дать больше инфы, объяснить или скинуть полезную ссылку?

http://javascript.ru/tutorial/dom/intro