鉴于这些 javascript 变量：
var div_id = "my_div";
var h1_class = "my_header";
var a_class = "my_a_class";
var a_string = "teststring";
还有这个页面元素：
<div id="container"></div>
我想用 jQuery 构建这个 html 结构：
<div id="container">
<div id="my_div">
<h1 class="my_header">
<a href="/test/" class="my_a_class">teststring</a>
</h1>
</div>
</div>
在此处链接命令的最佳和最易读的方式是什么？
【问题讨论】：
更新
JSON
var widgets = [{
"div" : {
"id" : "my-div-1"
},
"h1" : {
"class" : "my-header"
},
"a" : {
"class" : "my-a-class",
"text" : "google",
"href" : "http://www.google.com"
}
}, {
"div" : {
"id" : "my-div-2"
},
"h1" : {
"class" : "my-header"
},
"a" : {
"class" : "my-a-class",
"text" : "yahoo",
"href" : "http://www.yahoo.com"
}
}];
$(function() {
$.each(widgets, function(i, item) {
$('<div>').attr('id', item.div.id).html(
$('<h1>').attr('class', item.h1.class).html(
$('<a>').attr({
'href' : item.a.href,
'class' : item.a.class
}).text(item.a.text))).appendTo('#container');
});
});
【讨论】：
$('#container').html($('</div>')) 而不是appendTo()，但它们是两个不同的东西，html 将替换#container 中的所有内容，而appendTo 只是在其中注入代码。我猜性能应该几乎相同。
这是围绕所需输出链接命令的最简洁方式：
var div_id = "my_div";
var h1_class = "my_header";
var a_class = "my_a_class";
var a_string = "teststring";
var new_div = $("<div>").attr("id",div_id).append(
$("<h1>").addClass(h1_class).append(
$("<a>").attr("href","/test/").addClass(a_class).text(a_string)
)
);
$("div#container").append(new_div);
不一定是最方便的，但肯定是可读的。
【讨论】：
使用wrapInner() 并从内向外包裹。
var div_id = "my_div",
h1_class = "my_header",
my_a_class = "my_a_class";
$('#container').wrapInner('<a href="/test/" class="' + my_a_class + '">'+a_string+'</a>').wrapInner('<h1 class="' + h1_class + '"/>').wrapInner('<div id="' + div_id + '"/>');
【讨论】：
var template = '<div id="{my_div}">' +
'<h1 class="{myclass}">' +
'<a href="{url}" class="{my_a_class}">{a_string}</a>' +
'</h1>' +
'</div>';
var content = {
div_id: ["{my_div}","my_div"],
h1_class: ["{myclass}","my_header"],
a_class: ["{my_a_class}","my_a_class"],
a_url: ["{url}", "http://www.google.com"],
a_string: ["{a_string}","test string"]
}
$("#container").append(function (temp) {
for(var i in content) {
temp = temp.replace(new RegExp(content[i][0],'g'), content[i][1]);
}
return temp;
}(template));
【讨论】：
var $my_div = $('<div/>').attr('id', div_id);
var $h1 = $('<h1/>').addClass(h1_class);
var $a = $('<a/>').attr('href', '/test/').addClass(a_class).text(a_string);
$h1.append($a);
$my_div.append($h1);
$('#container').append($my_div);
【讨论】：
var div = $('<div>');
var div2 = $('<h1>');
var div3 = $('<a>');
div[0].id = "my_div";
div2[0].id = "my_header";
div3[0].class = "my_a_class";
div3.html("teststring");
$('#container').append(div.append(div2.append(div3)))
【讨论】：
使用 jQuerys wrap() 方法。
【讨论】：
如果 JavaScript 代码类似于 HTML 标记结构，则更具可读性和可维护性，类似于 Luca 回答的方式。
我做了一些不同的处理，并创建了一个函数来使每个元素成为一个可编辑的 jQuery 对象。
例如：
$$('div', {'id':'container'},
$$('div', {'id':'my_div'},
$$('h1',{'class':'my_header'},
$$('a',{'href':'/test/', 'class':'my_a_class'}, 'teststring'))));
$$ 函数返回一个 jQuery 对象的地方：
这使得该方法更加灵活，您可以很容易地使用链接将事件处理程序、数据等添加到嵌套的 jQuery 对象中。
例如：
$$('div', {'id':'container'},
$$('div', {'id':'my_div'},
$$('h1',{'class':'my_header'},
$$('a', { 'href': '/test/', 'class': 'my_a_class' }, 'teststring')
).click(function() { alert('clicking on the header'); })
).data('data for the div')
).hide();
您可能不想过度使用它，但我仍然发现代码比使用最佳实践 jQuery 方法（通过单独调用 .append()、.text() 来完成）更具可读性。 html() 等，或者通过为 jQuery $ 提供一个连接的 HTML 字符串。
这里是引用 $$ 函数（如果你不喜欢它可以叫它别的名字，但我认为 $$ 是合适的，因为它返回一个 jQuery 对象并且它也很短）：
function $$(tagName, attrTextOrElems) {
// Get the arguments coming after the params argument
var children = [];
for (var _i = 0; _i < (arguments.length - 2) ; _i++) {
children[_i] = arguments[_i + 2];
}
// Quick way of creating a javascript element without JQuery parsing a string and creating the element
var elem = document.createElement(tagName);
var $elem = $(elem);
// Add any text, nested jQuery elements or attributes
if (attrTextOrElems) {
if (typeof attrTextOrElems === "string") { // text
var text = document.createTextNode(attrTextOrElems);
elem.appendChild(text);
}
else if (attrTextOrElems instanceof jQuery) { // JQuery elem
$elem.append(attrTextOrElems);
}
else // Otherwise an object specifying attributes e.g. { 'class': 'someClass' }
{
for (var key in attrTextOrElems) {
var val = attrTextOrElems[key];
if (val) {
elem.setAttribute(key, val);
}
}
}
}
// Add any further child elements or text
if (children) {
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (typeof child === "string") { // text
var text = document.createTextNode(child);
elem.appendChild(text);
} else { // JQuery elem
$elem.append(child);
}
}
}
return $elem;
}
【讨论】：
$('#container').html('<div id="'+div_id+'">
<h1 class="'+my_header+'">
<a href="/test/" class="'+my_a_class+'">'+teststring+'</a>
</h1>
</div>');
试试这个？
【讨论】：