如何用jQuery替换一个div的innerHTML

如何用jQuery替换一个div的innerHTML

为了用jquery替换一个div的innerHTML,使用了html()函数。

语法:

$(selector).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
      
    </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替换一个div的innerHTML?

点击按钮后:
如何用jQuery替换一个div的innerHTML?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程