Javascript-форум - Функция, которая добавляет разметку на страницу

Задача:
Создайте объект, описывающий html-разметку. Напишите функцию, которая добавляет разметку в произвольный контейнер на странице.

разметка:

<section id="methods">
	<article>
		<h1>Array.prototype.every()</h1>
		<p>Метод every() проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.</p>
	</article>
	<article>
		<h1>Array.prototype.some()</h1>
		<p>Метод some() проверяет, удовлетворяет ли хоть какой-нибудь элемент массива условию, заданному в передаваемой функции.</p>
	</article>
	<article>
		<h1>Array.prototype.reduce()</h1>
		<p>Метод reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.</p>
	</article>
	<article>
		<h1>Array.prototype.reduceRight()</h1>
		<p>Метод reduceRight() применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.</p>
	</article>
</section>

мой js:

var tree={
  tag:'section',
  id: 'methods',//это атрибут тега section
  children:{
    children:{
      tag: 'article',
      children:{
        tag: 'h1',
        content: 'Array.prototype.every()',
      },
      children:{
        tag: 'p',
        content: 'Метод every() ...',
      },
    },
    children:{
      tag: 'article',
      children:{
        tag: 'h1',
        content: 'Array.prototype.some()',
      },
      children:{
        tag: 'p',
        content: 'Метод some() ...',
      },
    },
  },
}

function buildTree(tree, target) {
  for (var key in tree) {
    var item=tree[key];
    var $tag = $('<' + item.tag + '>').appendTo(target);

    if (item.children) {
          buildTree(item.children, $tag);
        };

    if (item.content) {
      $tag.text( item.content );
    };
  }
}

buildTree(tree, 'body');

мне на странице и в коде html выдает это:
html:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<title>doc</title>
		<script src="https://code.jquery.com/jquery-3.2.1.js" 
		integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
		crossorigin="anonymous"></script>
	</head>
	<body>
		
		<script src="js/script.js"></script>
                <undefined></undefined>
               <undefined>
                              <undefined></undefined>
                             <p>Метод some() ...</p>
               </undefined>
		
	</body>
</html>

На странице отображается текст "Метод some() ...".
Только последний тег р

Помогите разобраться. Что я не так прописываю?

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> var tree=[{ "tag": "SECTION", "children": [{ "tag": "ARTICLE", "children": [{ "content": "Array.prototype.every()", "tag": "H1" }, { "content": "Метод every() проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.", "tag": "P" }] }, { "tag": "ARTICLE", "children": [{ "content": "Array.prototype.some()", "tag": "H1" }, { "content": "Метод some() проверяет, удовлетворяет ли хоть какой-нибудь элемент массива условию, заданному в передаваемой функции.", "tag": "P" }] }, { "tag": "ARTICLE", "children": [{ "content": "Array.prototype.reduce()", "tag": "H1" }, { "content": "Метод reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.", "tag": "P" }] }, { "tag": "ARTICLE", "children": [{ "content": "Array.prototype.reduceRight()", "tag": "H1" }, { "content": "Метод reduceRight() применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.", "tag": "P" }] }] }] function buildTree(tree, target) { tree.forEach(function(item) { var $tag = $('<' + item.tag + '>').appendTo(target); if (item.content) { $tag.text(item.content); }; if (item.children) { buildTree(item.children, $tag); }; }) } $(function() { buildTree(tree, 'body'); }); </script> </head> <body> </body> </html>