所以我已经看到了三种向页面添加html / DOM元素的方法。我很好奇他们每个人的利弊是什么。
1 - 传统JavaScript
我相信直接的JS方法是构建每个元素,设置属性,然后附加它们。 例如:
var myRow = document.createElement("tr");
myRow.class = "myClass";
var firstTD = document.createElement("td");
firstTD.innerHTML = "first";
myRow.appendChild(firstTD);
var secondTD = document.createElement("td");
secondTD.innerHTML = "second";
myRow.appendChild(secondTD);
document.getElementById("myContainer").appendChild(myRow);
2 - 通过jQuery附加一串html
我注意到我看到的大多数jQuery示例通常只附加一串html 例如:
$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>');
3 - jQuery的.clone()
我在jQuery中也看到过很多用法和对.clone()的引用 例如:
$("#myContainer").append($(".myClass").Clone());
我很想听听其他人对此的看法。
(此外,这似乎是'社区维基'的一个很好的候选人,但我对它们不太熟悉。有人会发表评论并让我知道它是否应该?谢谢)
答案 0 :(得分:62)
如果您使用的是jQuery 1.4,最好的方法如下:
$("<a/>", {
id: 'example-link',
href: 'http://www.example.com/',
text: 'Example Page'
}).appendTo("body");
答案 1 :(得分:4)
如果您已经有一个要复制的模板元素,那么一定要使用clone()。
但是如果你想从头开始创建一个元素,那么基本上我认为你提到了两种方法:
首先,如果其中任何一种方法更直观或更容易为您编写,我建议您这样做。
否则使用后者的好处是,如果元素有很多孩子,它会更清晰。例如,尝试使用第一个方法创建一个包含6列的表行,每个列都有不同的类。您的代码将比使用第二种方法的代码长得多。
就性能而言,这是一个很好的指南http://andrew.hedges.name/experiments/innerhtml/,但对于大多数情况,简短的答案是差异可以忽略不计。一般来说,良好的绩效指南是:http://www.artzstudio.com/2009/04/jquery-performance-rules/。第6个提示与DOM操作有关。
答案 2 :(得分:0)
如果您已经有jQuery,请使用它。如果您不想托管它,请使用Google的托管版本。最后总是调用本机javascript createElement或innerHTML方法。所以如果我特意必须克隆页面上的现有元素,我会使用#2和#3。
答案 3 :(得分:0)
如果你正在使用大量的HTML,那么我建议你看一下:http://api.jquery.com/jQuery.template/这是最终的,但会被更好的东西取代。
我在生产环境中使用它,它很棒,对于较小的html片段来说是什么sp。说是最好的方式
答案 4 :(得分:0)
克隆现有内容...
var $html = $template.clone();
$html.find(''); ///after change content...
由于克隆内容与“&#39; DOM&#39;属性。然后你可以改变这个标签,属性,值然后追加它..
答案 5 :(得分:0)
您可以尝试以下方法:
$("<div/>", {
// PROPERTIES HERE
text: "Click me",
id: "example",
"class": "myDiv", // ('class' is still better in quotes)
css: {
color: "red",
fontSize: "3em",
cursor: "pointer"
},
on: {
mouseenter: function() {
console.log("PLEASE... "+ $(this).text());
},
click: function() {
console.log("Hy! My ID is: "+ this.id);
}
},
append: "<i>!!</i>",
appendTo: "body" // Finally, append to any selector
});
答案 6 :(得分:0)
您可以使用两个 jQuery append() 或 prepend() 方法向 DOM 添加或插入元素。 append() 方法在匹配元素的末尾插入内容,而 prepend() 方法在匹配元素的开头插入内容。
HTML 代码:
<button>Add item</button>
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
JQuery 代码:
$(document).ready(function(){
$("button").click(function(){
$("ul").append("<li>lorem ipsum</li>");
});
});
您可以在此处查看示例:How to add DOM element in jQuery
答案 7 :(得分:-2)
更简洁的方法是使用jQuery。
$('tr').addClass('myClass')
就像语法一样。这很容易阅读,理解和维护。