JQuery HTML manipulation

The following list contains jQuery methods for manipulating the content of HTML elements:

• text(): Fetches and sets the text in selected elements
• html(): Reads and sets HTML elements
• prepend(): Accepts HTML content as a parameter and adds it as the first child of selected elements
• before(): Places HTML content directly in front of selected elements
• append(): Accepts HTML content as a parameter and adds it as the last child of selected elements
• after(): Places HTML content directly behind selected elements
• empty(): Removes all content from selected elements
• remove(): Removes all content from selected elements, and also all selected elements
• replaceWith(): Takes the content of selected elements and the selected elements themselves and replaces them with specified content
• clone(): Takes the content of selected elements and the selected elements themselves and makes their copies

The text() method is used to fetch and set the text content of selected elements.

<!-- HTML -->
<div id="myDiv">This is some text.</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Fetch text content
      var textContent = $('#myDiv').text();
      console.log(textContent); // Output: "This is some text."
     
      // Set text content
      $('#myDiv').text('New text content');
  });
</script>

In this example, we first fetch the text content of the <div> element with the id myDiv, and then we set its text content to "New text content." The text() method reads and sets only the text content, excluding any HTML tags.

The html() method reads and sets the HTML content of selected elements.

<!-- HTML -->
<div id="myDiv">This is <strong>bold</strong> text.</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Fetch HTML content
      var htmlContent = $('#myDiv').html();
      console.log(htmlContent); // Output: "This is <strong>bold</strong> text."
     
      // Set HTML content
      $('#myDiv').html('<em>Italic</em> text');
  });
</script>

Here, we first fetch the HTML content of the <div> element with the id myDiv, and then we set its HTML content to "<em>Italic</em> text." The html() method reads and sets both text and HTML content, including any HTML tags.

The prepend() method accepts HTML content as a parameter and adds it as the first child of selected elements.

<!-- HTML -->
<div id="myDiv">
    <p>Existing content</p>
</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Prepend HTML content
      $('#myDiv').prepend('<p>Prepended content</p>');
  });
</script>

In this example, we prepend a new <p> element with the text "Prepended content" as the first child of the <div> element with the id myDiv.

The before() method places HTML content directly in front of selected elements.

<!-- HTML -->
<div id="myDiv">
    <p>Existing content</p>
</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Insert HTML content before the div
      $('#myDiv').before('<p>Before content</p>');
  });
</script>

Here, we insert a new <p> element with the text "Before content" immediately before the <div> element with the id myDiv.

The append() method accepts HTML content as a parameter and adds it as the last child of selected elements.

<!-- HTML -->
<div id="myDiv">
    <p>Existing content</p>
</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Append HTML content
      $('#myDiv').append('<p>Appended content</p>');
  });
</script>

In this example, we append a new <p> element with the text "Appended content" as the last child of the <div> element with the id myDiv.

The after() method places HTML content directly behind selected elements.

<!-- HTML -->
<div id="myDiv">
    <p>Existing content</p>
</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Insert HTML content after the div
      $('#myDiv').after('<p>After content</p>');
  });
</script>

Here, we insert a new <p> element with the text "After content" immediately after the <div> element with the id myDiv.

The empty() method removes all content from selected elements.

<!-- HTML -->
<div id="myDiv">
    <p>Existing content</p>
</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Empty the div
      $('#myDiv').empty();
  });
</script>

In this example, we remove all content, including the <p> element, from the <div> element with the id myDiv.

The remove() method removes all content from selected elements and also removes the selected elements themselves.

<!-- HTML -->
<div id="myDiv">
    <p>Content to be removed</p>
</div>

<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Remove the div and its content
      $('#myDiv').remove();
  });
</script>

Here, we not only remove the content within the <div> element but also remove the <div> element itself from the DOM.

The replaceWith() method takes the content of selected elements and the selected elements themselves and replaces them with specified content.

<!-- HTML -->
<div id="myDiv">
    <p>Content to be replaced</p>
</div>
<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Replace the div and its content
      $('#myDiv').replaceWith('<p>New content</p>');
  });
</script>

In this example, we replace the entire <div> element, including its content, with the specified <p> element containing "New content."

The clone() method takes the content of selected elements and the selected elements themselves and creates copies of them.

<!-- HTML -->
<div id="myDiv">
    <p>Original content</p>
</div>
<script>
  // JavaScript (jQuery)
  $(document).ready(function () {
      // Clone the div and its content
      var clonedDiv = $('#myDiv').clone();
      // Append the clone to the body
      $('body').append(clonedDiv);
  });
</script>

Here, we clone the entire <div> element, including its content, and then append the clone to the <body> of the document.