html - 使用 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");