jQuery for HTML
jQuery is a popular JavaScript library that simplifies the process of manipulating HTML and CSS in web development. With jQuery, developers can easily traverse and manipulate the HTML document object model (DOM) using fewer lines of code than if they were using pure JavaScript.
Here's an example of using jQuery to change the text of an HTML element with the ID "myElement"
:
Editor
In this example:
- We first include the jQuery library by adding a script tag that links to the jQuery library hosted on the official jQuery
CDN
. - We define an HTML
h1
element with the ID"myElement"
and some initial text. - We use jQuery to select the element with the ID
"myElement"
using the"$"
shorthand function and the ID selector. - We then use the
"text()"
method to change the text of the selected element to"New Text"
. - We wrap the jQuery code in a
document.ready
function to ensure that the code is only executed once the DOM has finished loading.
CDN stands for Content Delivery Network. It is a system of distributed servers that deliver web content (such as images, videos, CSS files, JavaScript files, etc.) to users based on their geographic location.
Set HTML Content
To set HTML content of an element using jQuery, you can use the .html()
method.
As an example:
Editor
In this example:
- We have a div element with the ID
"myElement"
, which contains some initial text wrapped in a paragraph element. - We use jQuery to select this element using the
$
shorthand function and the ID selector. - Inside the jQuery code block, we use the
.html()
method to set the HTML content of the selected element to a new paragraph element with some bold text. - The
.html()
method replaces any existing HTML content of the element with the new content specified as an argument. - When the document is ready, the jQuery code is executed and the HTML content of the
myElement
div is updated with the new content.
Get HTML Content
To get the HTML content of an element using jQuery, you can use the .html()
method without any arguments.
As an example:
Editor
In this example:
- We have a div element with the ID
"myElement"
, which contains two paragraph elements with some text. - We use jQuery to select this element using the
$
shorthand function and the ID selector. - Inside the jQuery code block, we use the
.html()
method without any arguments to get the HTML content of the selected element. - We then assign this HTML content to a variable called
htmlContent
. - We log the
htmlContent
variable to the console, which will display the HTML content of themyElement
div element. - When the document is ready, the jQuery code is executed and the HTML content of the
myElement
div is retrieved and logged to the console.
Set Text Content
To set the text content of an element using jQuery, you can use the .text()
method.
As an example:
Editor
In this example:
- We have a div element with the ID
"myElement"
, which contains some initial text. - We use jQuery to select this element using the
$
shorthand function and the ID selector. - Inside the jQuery code block, we use the
.text()
method to set the text content of the selected element to"This is some new text."
. - The
.text()
method replaces any existing text content of the element with the new text specified as an argument. - When the document is ready, the jQuery code is executed and the text content of the
myElement
div is updated with the new text.
Get Text Content
To get the text content of an element using jQuery, you can use the .text()
method without any arguments.
As an example:
Editor
In this example:
- We have a div element with the ID
"myElement"
, which contains some text and a paragraph element. - We use jQuery to select this element using the
$
shorthand function and the ID selector. - Inside the jQuery code block, we use the
.text()
method without any arguments to get the text content of the selected element. - We then assign this text content to a variable called
textContent
. - We log the
textContent
variable to the console, which will display the text content of themyElement
div element. - When the document is ready, the jQuery code is executed and the text content of the
myElement
div is retrieved and logged to the console.
Note that the text content includes only the text within the div element, and not the text within the paragraph element.