Question

这是我第一次做“回答你自己的问题”的帖子，所以我希望我能接近这个。

我的问题是，“使用jQuery生成html比使用标记字符串有更好的方法吗？”我希望能够生成嵌套的html而不会创建像

这样冗长的字符串

$("<form action='#{submitURL}' class='my_form'><input type='text'>...</form>")

但是使用嵌套函数调用。我希望HTML生成代码看起来像这样：

$.el.form
    id: "enrollment_form"
    class: "myFormClass"
    action: "/do_form", method: "post"
    [
        $.el.input
            type: "text"
            name: "last_name"
            placeholder: "Last name"
        $.el.input
            type: "text"
            name: "first_name"
            placeholder: "First name"
        $.el.div
            class: "action"
            $.el.input
                type: "submit"
    ]

Answer 1

我创建了一个简单的jQuery扩展来完成这个技巧（我创建了一个“el”命名空间来避免冲突）。用法如下：

$.el.<html element name>(htmlAttributes, content)

...其中内容可以是对$ .el。的另一次调用，或者是一系列此类调用

所以要创建它：

<u><i>This is underlined italicized</i></u>

你会写：

$.el.u {},
    $.el.i {}, "This is underlined italicized"

创造这个：

<ul class="my_class">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>     
</ul>

你会写：

$.el.ul {class: "my_class"},
    [
        $.el.li {}, "First item"
        $.el.li {}, "Second item"
        $.el.li {}, "Third item"
    ]

这简化了HTML的生成，并且摆脱了一堆杂乱的字符串插值和连接。

jsFiddle在这里：https://jsfiddle.net/jplato/tv1Lqa52/8/我欢迎任何有关如何改进它的反馈。

Answer 2

如果你要创建非常大的DOM元素，我肯定会建议使用javascript模板（Handlebars是我的最爱）

如果你正在创建一小块DOM，那么有一种优雅的方式。即将所有属性放入{}。

喜欢：$（＆＃34; tagName＆＃34;，{attr1：value1，attr2，value2 ....}）;

例如，如果我们想要创建一个简单的表单

<form action="google.com">
    <input type="text" value="hello" class="red-border">
    <button type="submit">click me</button>
</form>

使用此代码比将所有内容放入一个巨大的字符串更容易理解，并且更容易将事件绑定到每个元素

var form = $("<form/>",{
        action: "google.com"
    });

var input = $("<input>",{
        type:"text", 
        value:"hello",
        class:"red-border"
    }).appendTo(form);

var button = $("<button/>",{
        text:"click me", 
        type:"submit",
        style:"font-size:20px"
    }).appendTo(form);

button.click(function(){
    alert("clicked");
})

form.appendTo($("#container"));

FIDDLE LINK

Answer 3

在我看来，

Teacup是最佳解决方案。你的第一个例子可能是（UNTESTED）：

jcifs-1.3.8.jar

你的第二个例子（再次，UNTESTED）：

render ->
  form '.my_form'
    action: submitURL
    ->
      input type: 'text', ->
        ...

这看起来非常接近，如果不是比你的例子更清晰。

使用coffeescript / jQuery生成HTML比使用字符串更好的方法？

3 个答案: