• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Refreshing DIV Content with jQuery

January 9, 2013 //  by Ganesh Prakhya//  Leave a Comment

Frequently we may have to add or update content of the HTML elements in the web pages. The data we need to add or edit may come from various sources dynamically. jQuery has number of utility methods to achieve this goal. We can add elements or edit element’s data using jQuery.  For instance, we can update the contents of the DIV tag using jQuery’s text(),html() or load() methods.

text() Method

The jQuery’s text() method is used to get the text contents of the selected element. The element to get the text content can be selected using the selector syntax. The following snippet of code gets the contents of the DIV tag.

also read:

  • Introduction to jQuery
  • What is jQuery Ajax?

If you are looking for a good book on jQuery, please buy jQuery in Action

Here is the DIV tag.

<div id="myDiv">
<p>This is the content of the DIV tag myDiv</p>
</div>

The jQuery code to get the DIV tag’s content.

$("#myDiv").text()

We can also use text() method to set the contents of any element. In this case, we need to provide the new content as an argument to the text() method. The following snippet of code updates the DIV myDiv with new text.

$("#myDiv").text('<b>myDiv After Update</b>');

Optionally, we can also have a function which can return the new content being set and also have access to index and old content being replaced. The following is the example of the text() method with function usage.

$("#myDiv").text(function(index, currentContent) {
  alert(index + '   ' + currentContent);
  return "myDiv After Update";
});

The parameters index specifies the index position of the element and currentContent specifies the current content of the element. The current content will be replaced with new content.

When used text() method to return the contents of an element, the HTML markup in the content will be removed and text part only will be returned.

html() Method

The jQuery’s html() method gets the HTML contents of the selected element. The element to get the HTML content can be selected using standard selector syntax.  The following code snippet updates the DIV myDiv’s HTML content with new HTML tags.

$("#myDiv").html('<h1>myDiv After Update</h1>');

Just like text() method with function we can also have html() method with function as shown in the below example:

$("#myDiv").html(function(index, currentContent) {
  alert(index + '  ' + currentContent);
  return "myDiv After Update";
});

When used html() method to return the contents of an element, the HTML markup in the content will be returned.

load() Method

We can also use load() method to update the selected element’s content. This is particularly useful if the content to be updated is residing externally and accessible via URL. The example code retrieves content from externally located welcome.htm and updates the DIV myDiv.

$("#myDiv").load('welcome.html');

These are the possible ways jQuery can refresh the element content.

also read:

  • Introduction to jQuery
  • What is jQuery Ajax?

If you are looking for a good book on jQuery, please buy jQuery in Action

Category: jQueryTag: jQuery

About Ganesh Prakhya

Previous Post: « Android Application Development Tutorials
Next Post: jQuery Event Handling – Mouse Events jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact