JQuery автоматически закрывает теги при добавлении? например $( "<Р/" >")

Я видел это в некотором коде:

$("<p/>").append("<div>something</div>").appendTo("body");

и заметил, что он автоматически закрыл тег p в сгенерированном HTML:

<p><div>something</div></p>

Я никогда раньше не видел синтаксиса селектора $("<p/>"). Эта ошибка (и Chrome просто догадывается, что это должно быть) или это особенность синтаксиса селектора jQuery?

Ответ 1

Функция $ сильно перегружена, даже имея две функции для строк. Если строка является селектором CSS, она вернет объект, содержащий соответствующие элементы из документа. Если вы откроете с помощью <, он создаст элемент. Однако jQuery не создает тег. Элементы принадлежат DOM, теги принадлежат HTML, что является сериализацией DOM.

$("<p/>")  //Creates a p element
    .append("<div>something</div>") //inserts a child element, which is a div you created
                                    //containing the string "something"
    .appendTo("body"); //tags the newly created paragraph element, with its div child
                       //and inserts it into the DOM as a child of the body element.

Когда вы сериализуете документ, вы завершаете:

<body><p><div>something</div></p></body>

который показывает каждый элемент, содержащий его дочерние элементы.

Если ваша разметка выглядит так: <p/><div>something</div>, то элементы p и div являются братьями и сестрами. Это произойдет, если они будут добавлены к одному и тому же родителю:

//Use add to create a new element and add it to the jQuery collection object
//instead of appending it as a child to the p element.
$("<p/>").add("<div>something</div>").appendTo("body");

Ответ 2

это функция, а jQuery корректно отображает тег.

Ответ 3

Функция jQuery показывает, что происходит, когда вы делаете его закрывающим тегом по умолчанию, как ссылка

$("<link/>").append("<div>something</div>").appendTo("body");

Он генерирует

<link><div></div></link>

что, очевидно, неверно. Но это то, о чем просят сделать!

Ответ 4

<p/> является ярлыком для <p></p>