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

An Easier Way to Create a DOM Tree in JavaScript?

本文关键字：一种方法更简单 JavaScript 创建 DOM 更新时间：2023-09-26

为这个网站编写用户脚本，所以我添加元素的唯一方法就是使用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。这可以通过多行字符串来完成
使用GM_addStyle（）设置或更改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;
}

另请参阅"为什么更改我的框的innerHTML会使我的按钮在Greasemonkey中停止工作？"以及类似的问题。

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