An Easier Way to Create a DOM Tree in JavaScript? -

An Easier Way to Create a DOM Tree in JavaScript? -

working on userscript site way can add together elements javascript. it's simple stuff, lot of it, , hoping way cutting downwards on code.

i've got this:

var elm = document.getelementbyid('main'), nav = document.createelement('nav'), ul = document.createelement('ul'), l1 = document.createelement('li'), l2 = document.createelement('li'), l3 = document.createelement('li'), l4 = document.createelement('li'), l5 = document.createelement('li'), l6 = document.createelement('li'), l7 = document.createelement('li'), nest2 = document.createelement('ul'), nest3 = document.createelement('ul'), nest4 = document.createelement('ul'), nest2l1 = document.createelement('li'), nest2l2 = document.createelement('li'), nest2l3 = document.createelement('li'), nest3l1 = document.createelement('li'), nest3l2 = document.createelement('li'), nest3l3 = document.createelement('li'), nest3l4 = document.createelement('li'), nest4l1 = document.createelement('li'), nest4l2 = document.createelement('li'); nav.id = 'ps-nav'; ul.id = 'ps-ul'; l1.id = 'ps-announcements'; l1.classname = 'ps-listitem'; l2.id = 'ps-sponge'; l2.classname = 'ps-listitem'; nest2.id = 'ps-sponge-nest'; nest2.classname = 'ps-nest'; l3.id = 'ps-plugins'; l3.classname = 'ps-listitem'; nest3.id = 'ps-plugins-nest'; nest3.classname = 'ps-nest'; l4.id = 'ps-generaldiscussion'; l4.classname = 'ps-listitem'; nest4.id = 'ps-generaldiscussion'; nest4.clasname = 'ps-nest'; l5.id = 'ps-serverdiscussion'; l5.classname = 'ps-listitem'; l6.id = 'ps-meta'; l6.classname = 'ps-listitem'; l7.id = 'ps-uncategorized'; l7.classname = 'ps-listitem'; elm.appendchild(nav); nav.appendchild(ul); ul.appendchild(l1); ul.appendchild(l2); l2.appendchild(nest2); nest1.appendchild(nest2l1); nest1.appendchild(nest2l2); nest1.appendchild(nest2l3); ul.appendchild(l3); l3.appendchild(nest3); nest2.appendchild(nest3l1); nest2.appendchild(nest3l2); nest2.appendchild(nest3l3); nest2.appendchild(nest3l4); ul.appendchild(l4); l4.appendchild(nest4); nest3.appendchild(nest4l1); nest3.appendchild(nest4l2); ul.appendchild(l5); ul.appendchild(l6); ul.appendchild(l7);

i've nested indentation higher readability. how can cut down amount of code here achieving same affect?

in plain javascript:

create container. attach page. overwrite container's outerhtml. can done multiline string. use gm_addstyle() set or alter css.

like so:

var elm = document.getelementbyid ('main'); var nav = document.createelement ('nav'); elm.appendchild (nav); nav.outerhtml = multilinestr ( function () {/*! <nav id="ps-nav"> <ul id="ps-ul"> <li id="ps-announcements" class="ps-listitem">hiya!</li> // etc., etc. </ul> </nav> */} ); //-- reaquire `nav` variable, if desired. nav = document.getelementbyid ('ps-nav'); function multilinestr (dummyfunc) { var str = dummyfunc.tostring (); str = str.replace (/^[^\/]+\/\*!?/, '') // strip function() { /*! .replace (/\s*\*\/\s*\}\s*$/, '') // strip */ } .replace (/\/\/.+$/gm, '') // double-slash comments wreck css. strip them. ; homecoming str; }

see, also, "why changing innerhtml, of box, create button stop working in greasemonkey?" , similar questions.

the jquery equivalent is:

$("#main").append (multilinestr ( function () {/*! <nav id="ps-nav"> <ul id="ps-ul"> <li id="ps-announcements" class="ps-listitem">hiya!</li> // etc., etc. </ul> </nav> */} ) ); //-- reaquire `nav`, if desired. var nav = $('#ps-nav'); function multilinestr (dummyfunc) { var str = dummyfunc.tostring (); str = str.replace (/^[^\/]+\/\*!?/, '') // strip function() { /*! .replace (/\s*\*\/\s*\}\s*$/, '') // strip */ } .replace (/\/\/.+$/gm, '') // double-slash comments wreck css. strip them. ; homecoming str; }

javascript dom userscripts