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.
See these:
$("div")
its a selector which selects all the divs in the page.
$("<div>")
This creates a dom node <div></div>
because of <tags>
.
$("<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>
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>
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.
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>
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');