使用jQuery创建新元素

Question

我正在阅读有关使用jquery的基本文档：http://learn.jquery.com/using-jquery-core/manipulating-elements/

在标题为“创建新元素”的部分中，有第二个示例如下：

// Creating a new element with an attribute object
$( "<a/>", {
    html : "This is a <strong>new</strong> link",
    "class" : "new",
    href : "foo.html"
});

我完全不明白这一点。

1. 你是如何用无效的html创建一个元素：'a'后跟正斜杠？

2. 我生命中从未见过“html”属性。

对此示例的任何解释都会有所帮助。

Answer 1

<a/>只是一个自动结束标记，可以很容易地重写为$("<a></a>")。

html属性的值是jQuery用来最终设置内部HTML内容的。

Answer 2

<a/>表示没有内容的标记，也称为自动结束标记。然后将内容添加到其中。

jQuery解释尝试将html属性设置为设置链接的内容HTML。

话虽如此，代码有点尴尬。我更喜欢这个：

var a = document.createElement('a');
a.className = "new";
a.href = "foo.html";
a.innerHTML = "This is a <strong>new</strong> link";

或者，对于奖励积分，请删除innerHTML行并将其替换为：

a.appendChild(document.createTextNode("This is a "));
a.appendChild(document.createElement('strong')).appendChild(document.createTextNode("new"));
a.appendChild(document.createTextNode(" link"));

Answer 3

自我关闭<a />

当人们想到'新HTML'时（在HTML5之前），Web开发人员决定下一个HTML应该在XML之后建模。所以，XHTML诞生了。 XML中的标记约定之一是自闭合标记，用于存在的标记或仅包含属性的标记。到目前为止，我们仍然在现代HTML中看到这种惯例。虽然某些标记需要结尾，例如我们的<a>标记，但其他标记不喜欢<br>或<img>标记，因此当XHTML变得流行时，新的“酷”约定是自我关闭并在论坛中对那些没有做同样事情的人大喊大叫。这就是她写的全部内容。从技术上讲，它与<a></a>相同。

HTML属性

这不是<a>元素的属性，而是使用$('<a />')创建的jQuery对象的属性。它等同于jQuery库的html()方法。它只是赋予元素的innerHTML属性。