Как заменить innerHTML div с помощью jQuery?

Опубликовано: 23 Декабря, 2021

Для замены innerHTML div на jquery используется функция html ().

Синтаксис:

$ (селектор) .html ()

Пример:

 <!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 > 

После загрузки веб-страницы при нажатии кнопки содержимое внутри div будет заменено содержимым, указанным внутри функции html () .
Выход:

Перед нажатием кнопки:

После нажатия кнопки:

JQuery Picked

Как заменить innerHTML div с помощью jQuery?

РЕКОМЕНДУЕМЫЕ СТАТЬИ