使用JS函数生成Dom的库

Question

我正在寻找一个允许我使用简单的js函数生成DOM的库。

以下是我将如何想象代码的示例：

var dom = 
    div({class:'aaa', style:'background-color: yellow;'}, [
        h1([text('Hello')]),
        h2([text('World')])
    ])

$('body').innerHTML(dom.render())

你见过这种类型的东西吗？ 谢谢！

Answer 1

jQuery还不错：

var dom = $('<div class="aaa"/>')
    .css('background-color', 'yellow')
    .append(
        $('<h1/>').text('Hello'),
        $('<h2/>').text('World')
    );

尝试谷歌搜索“js dom builder”。我找到了：

• http://insin.github.io/DOMBuilder/build.html
• https://code.google.com/p/mkup/wiki/Examples。
• https://github.com/fgnass/mkay

Answer 2

欢迎来到jQuery的世界！

var div = $("<div>")
              .addClass("aaa")
              .css({background: "yellow"})
              .append("<h1>Hello</h1>")
              .append("<h2>World</h2>")
              .appendTo("body");