Question

处理此站点的用户脚本，因此我可以添加元素的唯一方法是使用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);

我已经将缩进嵌套以获得更高的可读性如何减少这里实现相同影响的代码量？

Answer 1

简单的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;
}

另请参阅"Why does changing the innerHTML, of my box, make my button stop working in 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;
}

在JavaScript中创建DOM树的更简单方法？

1 个答案: