1：利用DOM获取该 div 的 ID，然后清空该DIV的内容（如果你需要接着里面的内容添加可不要清空）；需要注意点是清空最好用“ empty()  ”；

2: 把  async设成true ,否则又一条警告的错误，这条错误导致你的内容显示不出来；下面就是警告的错误

3:就是添加HTML了。

具体代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>测试</title>
  6. </head>
  7. <body>
  8.   <div id="tset">
  9.   	<a href="http://www.baidu.com">百度</a>
  10.   </div>
  11.   <button id="btn">测试</button>
  12. </body>
  13. <script src="../../Js/jquery-3.4.1.js">
  14.  
  15. </script><script src="../../Js/layer-v3.1.1/layer/layer.js"></script>
  16. <script>
  17. 	$(function(){
  18. 		$("#btn").click(function(){
  19. 			$.ajax({
  20. 				url:'../../Html/JQueryDome/弹框.html',
  21. 				dataType:'html',
  22. 				type:'get',
  23. 				async:true,
  24. 				success:function(data){
  25. 					console.log(data);
  26.                    $("#tset").html(data)
  27. 				},error:function(){
  28.  
  29. 				}
  30. 			})
  31. 		})
  32. 	})
  33. </script>
  34. </html>

最后总结一下清空DIv的内容的方法

  1. empty()  情况选择器里面的内容
  2. 语法 $(“选择器”).empty()
  3. remove()  删除后再恢复事件不在
  4. 语法 $(“选择器”).remove()
  5. detach()   删除后再恢复事件在
  6. 语法 $(“选择器”).detach()

顺便把其余的也给出来吧：

包裹

  1. wrap()      每一个外面都添加一个新的元素
  2. 语法 $(“选择器”).wrap(“<元素名称>”)
  3. wrapAll()    同一包裹一个元素
  4. 语法 $(“选择器”).wrap(“<元素名称>”)
  5. wrapInner()  在里面添加一个新的元素
  6. 语法 $(“选择器”).wrap(“<元素名称>”)
  7. unwrap()    去掉包裹
  8. 语法 $(“选择器”).wrap(“<元素名称>”)
  1. 外部插入
  2. after()           在后面插      语法：  $(“选择器”).after(“<元素名称>”)
  3. insertAfter()      在后面插      语法：  $(“选择器”).insertAfter(“<元素名称>”)
  4. before           在后面插      语法：  $(“选择器”).before(“<元素名称>”)
  5. insertBefore()     在后面插      语法：  $(“选择器”).insertBefore(“<元素名称>”)
  1. 内部插入(在)
  2. append()         在后面插       语法：  $(“选择器”).append(“<元素名称>”)
  3. appendTo()       在后面插       语法：  $(“<元素名称>”).appendTo(“选择器”)
  4. prepend()        在前面插       语法：  $(“选择器”).prepend(“<元素名称>”)
  5. prependTo()      在前面插       语法：  $(“<元素名称>”).prependTo(“选择器”)
  1. 替换
  2. replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”))
  3. replaceAll    语法 $(“<元素名称>”).replaceAll    (““选择器”
  1. 克隆
  2. clone()
  3. 语法：1、$(“选择器”).clone().append(“元素名”)
  4.       2、$(“选择器”).append($(“元素名”).clone())

对了，还有一点就是（当然我是MVC中遇到的，不确定都有哟），就是在获取的网页中有内部JS，比如<script>这里是一个获取本地的时间函数</script>，然后当你执行AJAX时，页面不会添加到DIV中，整个页面就是是当前时间（但是地址没有变化）。解决办法：可以把该JS删除，或者该JS换成一个外部JS即可。

Ajax获取网页添加到div中的更多相关文章

  1. 使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  2. jQuery ajax 获取信息展示在“下拉列表”中

    <link href="${ctxStatic}/jquery-select2/4.0.3/select2.min.css" rel="stylesheet&quo ...

  3. python获取网页编码问题（encoding和apparent_encoding）

    在requests获取网页的编码格式时,有两种方式,而结果也不同,通常用apparent_encoding更合适 注:推荐一个大佬写的关于获取网页编码格式以及requests中text()和conte ...

  4. div中显示某个网页

    原文:div中显示某个网页 1.<iframe>方法 2.ajax方法 ajax+流实现无框架限制块刷新: 主框架index页面: js: $(function(){ $("#d ...

  5. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  6. WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据

    WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据 WebForm1.aspx 页面 (原生AJAX请求,写法一) <%@ Page Langu ...

  7. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  8. 利用html5中的localStorage获取网页被访问的次数

    利用html5中的localStorage获取网页被访问的次数 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据(转)

    WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据 WebForm1.aspx 页面 (原生AJAX请求,写法一) <%@ Page Langu ...

随机推荐

  1. es5设置属性不能修改

    /*es5*/ { var Person ={ name:'es5', age:19 } Object.defineProperty(Person,'sex',{ writable:false, va ...

  2. day03_正则表达式

    1.数据分类 数据的分类 ​ 定义:数据以行为单位,每一个数据表示一个实体的信息.每一行数据的属性都是一样的. ​ 常见的结构化数据为关系型数据库存储数据. 半结构化数据 ​ 定义:结构化数据的另一种 ...

  3. Selenium+Java（六）Selenium 强制等待、显式等待、隐实等待

    前言 在实际测试过程中,由于网速或性能方面的原因,打开相应的网页后或在网页上做了相应的操作,网页上的元素可能不会马上加载出来,这个时候需要在定位元素前等待一下,等元素加载出来后再进行定位,根据实际使用 ...

  4. Theano 更多示例

    Logistic函数 logistic函数的图,其中x在x轴上,s(x)在y轴上. 如果你想对双精度矩阵上的每个元素计算这个函数,这表示你想将这个函数应用到矩阵的每个元素上. 嗯,你是这样做的: x= ...

  5. nginx实现前后台分离部署

    2.1         前后台分离部署 (一)       组网图 (二)       简要说明: 如标题所示,至于为什么要前后台分离部署,个人理解的原因有三 (一)   便于部署 前台代码由ngin ...

  6. Spring Cloud报错Error creating bean with name 'requestMappingHandlerMapping'

    如果我们使用Spring Cloud的Feign实现熔断,首先需要自定义一个熔断类,实现你的feign接口,然后实现方法,这些方法就是熔断方法,最后需要在你的feign接口中指定fallback为自定 ...

  7. 炸裂函数explode

    ateral viem 表的关联只能和explode使用 hive> select explode(info) from t_map where id=1; hive> create ta ...

  8. 八大机器学习框架对比及Tensorflow的优势

    八大机器学习框架的对比: (1)  TensorFlow:深度学习最流行的库之一,是谷歌在深刻总结了其 前身 DistBelief 的经验教训上形成的:它不仅便携.高效.可扩 展,还能再不同计算机上运 ...

  9. 利用tp5开发智慧软文发布系统中遇到的一些坑

    1. PHP 计算两个时间戳之间相差的时间 假设你两个时间戳为$a,$b; 你可以用$c=$a-$b;(反正就是大的减小的),这时$c就是两个时间间隔的秒数了. 想求两个时间间隔的天数就用:$c/(6 ...

  10. Sql like模糊查询 区分大小写

    Sql模糊查询,Like默认是不区分大小写的 使用Like时,怎么支持大小写呢? upper.lower,只能模糊所有的内容,不能区分内容中的大小写. sqlite数据库对text字段默认是大小写敏感 ...