这是我第一次做“回答你自己的问题”的帖子,所以我希望我能接近这个。
我的问题是,“使用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"
]
答案 0 :(得分:2)
我创建了一个简单的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/我欢迎任何有关如何改进它的反馈。
答案 1 :(得分:0)
如果你要创建非常大的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"));
答案 2 :(得分:0)
Teacup是最佳解决方案。你的第一个例子可能是(UNTESTED):
jcifs-1.3.8.jar
你的第二个例子(再次,UNTESTED):
render ->
form '.my_form'
action: submitURL
->
input type: 'text', ->
...
这看起来非常接近,如果不是比你的例子更清晰。