¿Cómo reemplazar el HTML interno de un div usando jQuery?

Para reemplazar el HTML interno de un div con jquery, se usa la función html() .

Sintaxis:

$(selector).html()

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>
      changing-innerhtml-using-jquery
  </title>
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          rel="stylesheet">
    <style>
        body {
            margin-top: 5%;
        }
          
        div {
            text-align: center;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-3.4.0.min.js"
            type="text/javascript">
  </script>
</head>
  
<body>
  
    <div class="div_1">
        <h1>Geeksforgeeks</h1>
        <h1 style="color: green">
          This is the content inside the div before changing
      </h1>
    </div>
    <div class="div_2">
        <button class="btn btn-primary"
                type="submit">
          Click here for changing innerHTML
      </button>
    </div>
  
</body>
<script>
    $(document).ready(function() {
        $('.btn').click(function() {
            $("div.div_1").html(
              "<h1><span style='color: green;'>GeeksforGeeks"+
              "</span><br>This is the content inside the div"+
              " after changing innerHTML</h1>");
        })
  
    })
</script>
  
</html>

Después de cargar la página web, al hacer clic en el botón, el contenido dentro del div será reemplazado por el contenido dado dentro de la función html() .
Producción:

Antes de hacer clic en el botón:

Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por shilpiagk y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *