jQuery HTML


 

jQuery HTML Manipulation

jQuery provides several methods for manipulating the HTML content of elements. These methods allow you to easily modify, replace, or retrieve the HTML within elements on a webpage. Understanding how to use these methods effectively is crucial for dynamic web development.

jQuery HTML Methods

  1. html():

    • Retrieves the HTML content of the selected elements or sets the HTML content of the selected elements.
    • Syntax:
      javascript
      $(selector).html([newHTML]);
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').html('<p>This is new content.</p>');
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery HTML Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>

  2. .append():

    • Adds content to the end of the selected elements.
    • Syntax:
      javascript
      $(selector).append(content);
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').append('<p>Appended paragraph.</p>');
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Append Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>

  3. .prepend():

    • Adds content to the beginning of the selected elements.
    • Syntax:
      javascript
      $(selector).prepend(content);
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').prepend('<p>Prepended paragraph.</p>');
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Prepend Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>

  4. .before():

    • Inserts content before the selected elements.
    • Syntax:
      javascript
      $(selector).before(content);
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').before('<p>Before the content.</p>');
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Before Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>

  5. .after():

    • Inserts content after the selected elements.
    • Syntax:
      javascript
      $(selector).after(content);
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').after('<p>After the content.</p>');
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery After Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>

  6. .remove():

    • Removes the selected elements from the DOM.
    • Syntax:
      javascript
      $(selector).remove();
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').remove();
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Remove Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>

  7. .empty():

    • Removes all child elements from the selected elements.
    • Syntax:
      javascript
      $(selector).empty();
    • Example:
      javascript
      $(document).ready(function () {
    $('#content').empty();
});

    HTML:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Empty Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">Original content here.</div>
</body>
</html>