一个 Var，多个 createElement答案

【问题标题】：one Var, multiple createElement一个 Var，多个 createElement
【发布时间】：2013-07-31 08:05:19
【问题描述】：

我正在从 js 创建一个 html 结构。

var e = document;

        // HTML Tree
        $this.append(
            $(e.createElement('div')).addClass('wood-bottom'), 
            $(e.createElement('div')).addClass('jalendar-wood')
                .append(
                    $(e.createElement('div')).addClass('jalendar-pages')
                        .append(
                            $(e.createElement('div')).addClass('pages-bottom'),
                            $(e.createElement('div')).addClass('header'),
                            $(e.createElement('div')).addClass('total-bar'),
                            $(e.createElement('div')).addClass('days')
                )
            )
        );

还有很多createElement('div') 声明。

这种方法有更好的解决方案吗？如果我定义var e = document.createElement('div')，它就不会像我想要的那样工作。

【问题讨论】：

而不是 document.createElement('div') 你可以使用 $('
')
您的代码说您将e 声明为document，那么您为什么说“我正在定义var e = document.createElement('div')”？
对于构建复杂的 DOM 结构，最好使用一些基于对象结构的方法。 JSON ML 提供了一个不错的方法，或者您可以自己制作。
@koala_dev 我想 createElement('div') 因为它比 $('div') 快 5-6 倍。
@ian 对不起，我想说'当我定义'时'

标签： javascript jquery append createelement

【解决方案1】：

自定义函数呢？

var div = function(klass){return $(document.createElement('div')).addClass(klass)};

    // HTML Tree
    $this.append(
        div('wood-bottom'), 
        div('jalendar-wood')
            .append(
                div('jalendar-pages')
                    .append(
                        div('pages-bottom'),
                        div('header'),
                        div('total-bar'),
                        div('days')
            )
        )
    );

【讨论】：

【解决方案2】：

你可以使用 jQuery clone()：

var e = document;
var $d = $(e.createElement('div'));

$this.append(
    $d.clone().addClass('wood-bottom'),
    $d.clone().addClass('jalendar-wood')
        .append(
            $d.clone().addClass('jalendar-pages')
            [...]

【讨论】：

为什么选择 jQuery？简单的 DOM 元素也有一个原生的 clone 方法……
这是一个很好的观点，@Bergi！ cloneNode 也会很好用。在此期间，可能使用setAttribute 添加类，并使用appendChild。谢谢@Bergi！