用JavaScript创建DOM树的一种更简单的方法？

为这个站点编写一个用户脚本，所以我可以添加元素的唯一方法就是使用JavaScript。目前它很简单，但很多，我希望能找到一种减少代码的方法

我有这个：

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

我嵌套了缩进以提高可读性。
如何减少此处的代码量以达到相同的效果？

在纯javascript中：

创建容器

将它附加到页面上

覆盖容器的

outerHTML

。这可以通过多行字符串来完成

用于设置或更改CSS

像这样：

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.
            ;
    return str;
}

var elm=document.getElementById（'main'）；
var nav=document.createElement（'nav'）；
埃尔姆·查德（海军）；
nav.outerHTML=multilestr（函数（）{/*！

你好
//等等等等。

*/} );
//--如果需要，重新获取'nav'变量。
nav=document.getElementById（'ps-nav'）；
函数multilestr（dummyFunc）{
var str=dummyFunc.toString（）；
str=str.replace（//^[^\/]+\/\*！？/，“”）///Strip function（）{/*！
.replace（/\s*\*\/\s*\}\s*$/，“”）//Strip*/}
.replace（/\/.+$/gm，）//双斜杠注释破坏CSS。剥掉它们。
;
返回str；
}

另请参见和类似问题

---

jQuery等价物是：

$("#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.
            ;
    return str;
}

$（“#main”）.append（multilestr（函数（）{/*）！

你好
//等等等等。

*/} ) );
//--如果需要，请重新获取“导航”。
var-nav=$（'ps-nav'）；
函数multilestr（dummyFunc）{
var str=dummyFunc.toString（）；
str=str.replace（//^[^\/]+\/\*！？/，“”）///Strip function（）{/*！
.replace（/\s*\*\/\s*\}\s*$/，“”）//Strip*/}
.replace（/\/.+$/gm，）//双斜杠注释破坏CSS。剥掉它们。
;
返回str；
}

用HTML而不是Javascript创建它。@Barmar我不能这样做。这是一个用户脚本。@Spedwards:您可以将HTML放在字符串中，然后将其放在要附加到的元素的innerHTML中？您可以使用

elm.innerHTML+=“HTML字符串”

Wow。。。我不敢相信我居然忽略了

innerHTML

。。。