Создание дерева DOM с использованием рекурсии

Question

var div = { 
    element:'div', 
    parent:'body', 
    style: { 
    width:'100px', 
    height:'100px', 
    border:'1px solid black' 
    } 

    child: { 
    element:'input', 
    type:'text', 
    name:'age', 
    value:'22' 
    } 
} 

Я хочу, чтобы передать этот объект функции и функции рекурсивны создать элементы DOM

Существует основной ДИВ и есть вход дочернего элемента, связанный с ним. Основной div имеет некоторый стиль, который также применяется динамически.

Как я могу это сделать?

Answer 1

Я написал библиотеку под названием art.js для аналогичной цели.

С помощью art.js элементы DOM можно определить древовидным способом, используя вложенные вызовы функций. Литералы объектов могут использоваться для применения свойств к элементам.

Затем, чтобы получить то, что вы хотите, вы можете использовать этот код:

var div = art(
    'div', 
    { 
     style: 
     { 
      width: '100px', 
      height: '100px', 
      border: '1px solid black' 
     } 
    }, 
    art(
     'input', 
     { type: 'text', name: 'age', value:'22' } 
    ) 
); 
art(document.body, div); 

В документации также приведены примеры о том, как добавить обработчики событий.