Home > Article > Web Front-end > Ajax method to get web pages added to div
Ajax method to get web pages added to div
- angryTomforward
- 2019-12-14 17:23:062520browse
Ajax method to get the web page added to the div
1: Use DOM to get the ID of the div, and then clear the content of the DIV ( If you need to add the content inside, do not clear it); it should be noted that it is best to use "empty()" to clear it;
2: Set async to true, otherwise there will be another warning error, this The error prevents your content from being displayed; the following is the warning error
[Related course recommendations: JavaScript video tutorial]
3: Just add HTML.
The specific code is as follows:
<!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>Finally, let’s summarize the method of clearing the contents of Div
empty() 情况选择器里面的内容 语法 $(“选择器”).empty() remove() 删除后再恢复事件不在 语法 $(“选择器”).remove() detach() 删除后再恢复事件在 语法 $(“选择器”).detach()
By the way, let’s give the rest as well. :
Package
wrap() 每一个外面都添加一个新的元素 语法 $(“选择器”).wrap(“<元素名称>”) wrapAll() 同一包裹一个元素 语法 $(“选择器”).wrap(“<元素名称>”) wrapInner() 在里面添加一个新的元素 语法 $(“选择器”).wrap(“<元素名称>”) unwrap() 去掉包裹 语法 $(“选择器”).wrap(“<元素名称>”)
External insert
after() 在后面插 语法： $(“选择器”).after(“<元素名称>”) insertAfter() 在后面插 语法： $(“选择器”).insertAfter(“<元素名称>”) before 在后面插 语法： $(“选择器”).before(“<元素名称>”) insertBefore() 在后面插 语法： $(“选择器”).insertBefore(“<元素名称>”)
Internal insert(in)
append() 在后面插 语法： $(“选择器”).append(“<元素名称>”) appendTo() 在后面插 语法： $(“<元素名称>”).appendTo(“选择器”) prepend() 在前面插 语法： $(“选择器”).prepend(“<元素名称>”) prependTo() 在前面插 语法： $(“<元素名称>”).prependTo(“选择器”)
Replace
replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”)) replaceAll 语法 $(“<元素名称>”).replaceAll (““选择器”
Clone
clone()
Grammar:
1、$(“选择器”).clone().append(“元素名”) 2、$(“选择器”).append($(“元素名”).clone())
By the way, another point is (of course I encountered it in MVC, I’m not sure if there are any), that is, there is internal JS in the obtained web page, such as <script> Here is a function to get the local time </script>. Then when you execute AJAX, the page will not be added to the DIV, and the entire page will be the current time (but the address will not change). Solution: You can delete the JS, or replace the JS with an external JS.
This article comes from the js tutorial column, welcome to learn!
The above is the detailed content of Ajax method to get web pages added to div. For more information, please follow other related articles on the PHP Chinese website!