Creating dom tree using recursion

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'
  }
}

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?

Let's start with this: There is a comma missing after the style property. Is that just a typo? And where is the recursion? Can there be multiple children? Can a child have a child? — Sebastian Nette
– Sebastian Nette, Commented Jul 25, 2015 at 8:50
github.com/shreeramneupane/doc/blob/master/js/file.js might help you to get answer. — Shree Ram Neupane
– Shree Ram Neupane, Commented Jul 25, 2015 at 8:53
Yes there can be multiple child and chld can have child and sorry that was a typo — ninjawarrior
– ninjawarrior, Commented Jul 25, 2015 at 9:03
I don't understand what the problem is. Just write a function which does what you want. — user663031
– user663031, Commented Jul 25, 2015 at 9:05
@RanojitBanerjee How are multiple children structured? Are they named child, child2, child3 or can the child property either be an object for 1 single child or an array for multiple children? You need to give us some more information. — Sebastian Nette
– Sebastian Nette, Commented Jul 25, 2015 at 9:08

GOTO 0 · Accepted Answer · 2015-07-25 09:04:07Z

1

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.

answered Jul 25, 2015 at 9:04

GOTO 0

48.8k25 gold badges139 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating dom tree using recursion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related