JavaScript learning -37 JQuery add / remove / replace elements

preface

With jQuery, you can easily add and remove elements.

Add element

There are four main methods for adding elements

  • append() - insert content at the end of the selected element
  • prepend() - inserts content at the beginning of the selected element
  • after() - insert content after the selected element
  • before() - insert content before the selected element

The append() method inserts content at the end of the selected element (as a child of the element)

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">Point me</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $("#Demo ").Append (" <p> append a text </p> ");
      });
});
</script>
copy

Click the button to add an element under div

prepend() inserts content at the beginning of the selected element

   $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $("#Demo ").Prepend (" <p> append a text </p> ");
      });
    });
copy

To achieve the effect, add to the first child element under div

after() inserts content after the selected element

    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $("#Demo ").After (" <p> append a text </p> ");
      });
    });
copy

Add sibling element after div

before() inserts content before the selected element

    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $("#Demo ").Before (" <p> append a text </p> ");
      });
    });
copy

replaceWith() replace element

The replaceWith() method replaces the selected element with the specified HTML content or element.

The content parameter is required. Specifies the content to replace the selected element. Existing elements will not be moved, but will be copied and wrapped around the selected elements.

Basic grammar

$(selector).replaceWith(content)
copy

Use examples

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">Point me</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $("p.text-info").replaceWith("<p>Replace with new text</p>");
      });
    });
</script>
copy

After replacement

The replaceWith() method can also pass a function function

$(selector).replaceWith(function())
copy

Example

    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $("p.text-info").replaceWith(function () {
              return '<p>new hello world</p>'
          });
      });
    });
copy

replaceAll() has the same function as replaceWith(), but the target and source are the opposite

On the left is the new content, and on the right is the replaced content

$(content).replaceAll(selector)
copy

Example

    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $('<p>new hello world</p>').replaceAll('p.text-info')
      });
    });
copy

Summary:

  • replaceAll() and The replaceWith() function is similar, mainly due to the location difference between the target and the source
  • replaceWith() and The replaceAll() method deletes all data and event handlers associated with the node
  • The replaceWith() method, like most other jQuery methods, returns jQuery objects, so it can be linked with other methods
  • The jQuery object returned by the replaceWith() method refers to the node before replacement, rather than the node after replacement through the replaceWith/replaceAll method

Delete the elements remove() and empty()

To delete elements and contents, you can use the following two jQuery methods:

  • empty() - delete child elements from the selected element
  • remove() - delete the selected element (and its child elements)

empty() deletes child elements from the selected element

Example

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">Point me</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $('#demo').empty();
      });
    });
</script>
copy

div is still there

remove() deletes the element and child elements

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">Point me</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // Add an element
          $('#demo').remove();
      });
    });
</script>
copy

remove() deletes the div and its child elements

The 11th edition of "python interface web automation + test development" course in 2022 starts on June 5!

JMeter performance test practice course starts on June 15

Posted by 5kyy8lu3 on Wed, 01 Jun 2022 11:44:41 +0530

Hot Tags

©2023 Programs Team