CODEWITHSUNDEEP
javascript
ninjawarrior
ninjawarrior

Reputation: 326

Creating dom tree using recursion

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

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

I want to pass this object to a function and the function will recursively create the dom elements

There is a main div and there is a child element input associated with it. The main div has some style which is also applied dynamically.

How can i do this?

Upvotes: 0

Views: 146

Answers (1)

GOTO 0
GOTO 0

Reputation: 47941

I wrote a library called art.js for a similar purpose.

With art.js you can define DOM elements in a tree-like fashion using nested function calls. Objects literals can be used to apply properties to elements.

Then, to get what you want, you could use this code:

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);

The documentation also shows examples on how to add event listeners.

Upvotes: 1

Related Questions