Skip to main content

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

Loading...

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.
what is cdn

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

Loading...

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

Loading...

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 the myElement 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

Loading...

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

Loading...

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 the myElement 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

Note that the text content includes only the text within the div element, and not the text within the paragraph element.