How does this jquery code work?
Question
(Sorry for the bad title, I can't think of a better one)
I recently learned that you can do something like this in jquery:
$("<div><span>content</span></div>").css("color", "red").appendTo("body");
My question is about the following:
$("<div><span>content</span></div>")
How does jquery turn this from a string into dom elements, and how could you do the same thing in vanilla js (no jquery)?
I have attempted to look through the jquery source code, but I don't really understand it.
Any explanation is greatly appreciated!
3 answers
solution1
3 2015-04-04 04:06:29
the equivalent in pure javascript would be
var newDiv = document.createElement("DIV");
newDiv.style.color = "red";
var newSpan = document.createElement("SPAN");
newSpan.innerHTML = "content";
newDiv.appendChild(newSpan);
document.body.appendChild(newDiv);
jquery shortcuts this by defining functions that are chainable meaning the next function uses the previous functions return value as its input so in your example it is adding the css to your html code and then adding all of that code to the body
solution2
2 ACCPTED 2015-04-04 04:03:22
jQuery is creating a new instance of a jQuery object that contains a reference to the DOM elements created by parsing <div><span>content</span></div> .
One really useful thing jQuery does is that every invocation of jQuery or any of its API methods returns either the newly created jQuery instance or the current jQuery instance. The benefit of this is that you can chain your calls to transform a set of DOM elements.
In this case, $(...) returns a jQuery instance containing the DOM elements you want to operate on. Next, you chained css() which adds style properties to that element. Finally, you chain appendTo() which adds that to a target DOM element. In this case, that target is the <body> element.
Here's how this process would look (roughly) in JavaScript:
First, we need to create the DOM elements we wish to insert.
var node = document.createElement("div");
node.innerHTML = "<div><span>content</span></div>";
var myElement = node.children[0];
Then we'll set the style properties.
myElement.style.color = "red";
Finally, lets append it to an existing element.
document.body.appendChild(myElement);
The creation of the DOM elements from a string happens through the magic of the innerHTML property. When the JavaScript parser encounters a string being set to an elements innerHTML , it will parse that string into DOM elements and insert those elements as children.
Therefore, what jQuery is doing under the hood is creating a dummy element, setting the string you provided as a value on the dummy elements innerHTML property. This causes the DOM elements to be created and inserted as the dummy elements children. Lastly, it retrieves the reference to the children element (the elements you want).
solution3
0 2015-04-04 04:09:15
This line creates an jQuery wrapped object from an html string, essentially creating a div with a span inside it whose text is the word content :
$("<div><span>content</span></div>")
This applies a CSS property to the created element telling it to display the text in red:
.css("color", "red")
This adds the created and styled element to the DOM at the end of the body tag:
.appendTo("body");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.