Does jQuery can use an end tag as a selector?

2020-07-20 04:37发布

问题:

I am pretty new in jQuery. I cam across this jQuery code that uses <div /> as a selector:

$("<div />").html(someString).text();

First of all, I would like to know if it is a legitimate tag to use, since div has an end tag: </div>.

But my main question - does jQuery can use an end tag as a selector and what would be the result of such code?

What will do such code? I did some research, and here, meagar say:

There is no such thing as a "closing tag" in the DOM. Tags, closing or otherwise, are a component of your markup, the DOM has only elements.

but does jQuery treat an end tag as reference to a DOM element like it treats an opening tag?

Thank you very much.

回答1:

See these:

  1. $("div") its a selector which selects all the divs in the page.
  2. $("<div>") This creates a dom node <div></div> because of <tags>.
  3. $("<div />") and $("<div></div>") is also same as 2.

So, in javascript there is a method called document.createElement(tagName), which is used to create new elements in the page.

So basically jQuery has a different syntax but document.createElement(tagName) is used behind the scenes.


For you comment:

var div = $('<div/>').html('<p>Hi!!!</p>').text(); // put a html string and get the text content of it.

document.body.textContent = div; // put the text content in the doc body.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



回答2:

It is not a selector, we are creating a new dom element div and is setting its text content here.

If the parameter to jQuery is a string and its first character is a < it the passed string is not considered as a selector, instead it is considered as a request to create a new element.

If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with ). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:

Also it is not an end tag, it is a notation where the opening and closing notation are combined to one so it is the same as <div></div>



回答3:

I cam across this jQuery code that uses <div /> as a selector

That isn't a selector. jQuery can accept a lot of different things as the first argument to the jQuery/$ function. In this case it is a string of HTML, which will be used to create a new element.


First of all, I would like to know if it is a legitimate tag to use

It isn't in HTML, but jQuery supports some custom syntax for element creation.

See the documentation:

When the parameter has a single tag (with optional closing tag or quick-closing) — $( "<img />" ) or $( "<img>" ), $( "<a></a>" ) or $( "<a>" ) — jQuery creates the element using the native JavaScript .createElement() function.


does jQuery can use an end tag as a selector

No. When selecting elements from the DOM, jQuery can still only access elements — not start tags, not end tags, just complete elements.



回答4:

It's not a selector. Is a creation of the <div> tag. In normal cases, it appends after or before another element.

Note that this: <div/> is not a closing tag, is an open and close tag.

This:

 <div/>

is the same that this:

  <div></div>


回答5:

Using Jquery if you want to create a new div element you can use $("<div/>) like this, Since we are passing a valid HTML content inside $() it will try to create that HTML.

Now this particular piece of code is used when we want to decode the HTML entities in a string, check this post for details

var decodedString = $("<div />").html(someStringForDecoding).text();

This will return the decoded HTML entities in the string.

These are also valid codes to create Div

$("<div></div>").appendTo("div#anotherDiv");
$("<div>").attr('id','divId').appendTo('body');