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

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

3:就是添加HTML了。

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<div id="tset">
<a href="http://www.baidu.com">百度</a>
</div>
<button id="btn">测试</button>
</body>
<script src="../../Js/jquery-3.4.1.js"> </script><script src="../../Js/layer-v3.1.1/layer/layer.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.ajax({
url:'../../Html/JQueryDome/弹框.html',
dataType:'html',
type:'get',
async:true,
success:function(data){
console.log(data);
$("#tset").html(data)
},error:function(){ }
})
})
})
</script>
</html>

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

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

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

包裹

wrap()      每一个外面都添加一个新的元素
语法 $(“选择器”).wrap(“<元素名称>”)
wrapAll() 同一包裹一个元素
语法 $(“选择器”).wrap(“<元素名称>”)
wrapInner() 在里面添加一个新的元素
语法 $(“选择器”).wrap(“<元素名称>”)
unwrap() 去掉包裹
语法 $(“选择器”).wrap(“<元素名称>”)
外部插入
after() 在后面插 语法: $(“选择器”).after(“<元素名称>”)
insertAfter() 在后面插 语法: $(“选择器”).insertAfter(“<元素名称>”)
before 在后面插 语法: $(“选择器”).before(“<元素名称>”)
insertBefore() 在后面插 语法: $(“选择器”).insertBefore(“<元素名称>”)
内部插入(在)
append() 在后面插 语法: $(“选择器”).append(“<元素名称>”)
appendTo() 在后面插 语法: $(“<元素名称>”).appendTo(“选择器”)
prepend() 在前面插 语法: $(“选择器”).prepend(“<元素名称>”)
prependTo() 在前面插 语法: $(“<元素名称>”).prependTo(“选择器”)
替换
replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”))
replaceAll 语法 $(“<元素名称>”).replaceAll (““选择器”
克隆
clone()
语法:1、$(“选择器”).clone().append(“元素名”)
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. Linux高级命令-sort、uniq、 cut、sed、grep、find、awk

    sort(参考学习网站:http://www.cnblogs.com/dong008259/archive/2011/12/08/2281214.html) 功能:根据不同的数据类型进行排序 格式:s ...

  2. JavaScript实战实例剖析——(激励倒计时日历)

    如今JavaScript在前端开发中的地位越来越高,掌握JavaScript的深度往往能决定你职业道路深远,这次通过制作 带着倒计时功能的激励日历的小实例,进一步细致的掌握JavaScript的语法与 ...

  3. 引用公共页面的js函数报错

    对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...

  4. lerna式升级

    有段时间没更新博客了,是时候更新一波了. 之前不是vue-next出了吗,然后就去学习了一下,发现整个目录不是那么熟悉了,变成这样了: 于是就这个线索去研究了一下,发下这是用的 lerna + yar ...

  5. 【并发技术16】线程同步工具Exchanger的使用

    如果两个线程在运行过程中需要交换彼此的信息,比如一个数据或者使用的空间,就需要用到 Exchanger 这个类,Exchanger 为线程交换信息提供了非常方便的途径,它可以作为两个线程交换对象的同步 ...

  6. MVVMLight绑定数据

    我们先新建一个WPF项目MVVMLightDemo,添加GalaSoft.MvvmLight.dll(没有可以自己下载) 然后在项目中添加三个文件夹,如图: 先添加我们的Model,在Model下新建 ...

  7. luogu P1908 逆序对 |树状数组

    题目描述 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不喜欢再玩那种你追我赶的游戏,现在他们喜欢玩统计.最近,TOM老猫查阅到一个人类称之为"逆序对"的 ...

  8. Zookeeper选取机制

    1)半数机制:集群中半数以上机器存活,集群可用.所以Zookeeper适合安装奇数台服务器. 2)Zookeeper虽然在配置文件中并没有指定Master和Slave.但是,Zookeeper工作时, ...

  9. [TimLinux] django html如何实现固定表头

    1. 需求 表格很长,这个时候就希望表格头部不动,而只是表格内容行支持滚动功能. 2. 方法 两张表:一张表(THeader)负责头部字段的显示,另一张表(TBody)负责内容行字段的显示. 两张表都 ...

  10. Multiplication Game

    Description Alice and Bob are in their class doing drills on multiplication and division. They quick ...