Skip to content
Advertisements

JQuery replaceWith() Example

Overview

JQuery replaceWith() Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>

  <ul class="container">
    <h2 class="title">Normal List</h2>
      <li>Row 1</li>
      <li>Row 2</li>
      <li>Row 3</li>
      <li>Row 4</li>
      <li>Row 5</li>
      <button class="btn btn-warning">CLICK</button>
  </ul>


  <script>

    $(document).ready(function(){
      $(".btn").click(function(){
        $("h2").replaceWith("<h2>Bootstrap List</h2>")
        $("li").replaceWith(function(){
          return "<p class='list-group-item'>" + $(this).html() + "</p>";
          });
        $(this).remove();
        })
    })  

  </script>

</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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

%d bloggers like this: