动态更新网页局部内容：innerHTML与Ajax方法-CSDN博客

本文链接：https://blog.csdn.net/qq_45135600/article/details/129199262

修改网页局部块级元素

如何修改？
使用以下方法
document.getElementById('id').innerHTML = '新html代码'
采取方法
- ajax ，通过api交互修改，局部页面显示数据

<script>
    $.ajax({
        url: '/update_html/',
        type: "POST",
        dataType: "json",
        data: data,
        success: function (result) {
            if (result.code == 0) {
                layer.msg(result.msg)
                document.getElementById(data.elem.title).innerHTML = result.data
            } else {
                layer.msg(result.msg)
            }
        }
    })
</script>

无api实例展示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例演示</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="layui-form">
  <select id="select-id">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>
</div>

<div id="ad_1">
  <div>
    <button style="color: dodgerblue">测试button</button>
  </div>
</div>


<!-- 注意：项目正式环境请勿引用该地址 -->
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

<script>
  $("#select-id").change(function(){
     document.getElementById('ad_1').innerHTML = '<p>哈哈哈哈</p> <p>hahhahaha</p>'
  });
</script>

</body>
</html>