Heim > Web-Frontend > js-Tutorial > Hauptteil

Ajax-Methode zum Hinzufügen von Webseiten zu div

angryTom
Freigeben: 2019-12-14 17:23:06
nach vorne
2579 Leute haben es durchsucht

Ajax-Methode zum Hinzufügen von Webseiten zu div

Ajax-Methode, um die Webseite zum Div hinzuzufügen

1: Verwenden Sie DOM, um die ID des Divs abzurufen, und löschen Sie sie dann den Inhalt des DIV (Wenn Sie den Inhalt hinzufügen müssen, löschen Sie ihn nicht); es ist zu beachten, dass es am besten ist, ihn mit „empty()“ zu löschen.

2: Asynchron festlegen auf true, andernfalls wird ein weiterer Warnfehler angezeigt. Der Fehler verhindert, dass Ihr Inhalt angezeigt wird. Der folgende Warnfehler lautet

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Ajax-Methode zum Hinzufügen von Webseiten zu div

3: Fügen Sie einfach HTML hinzu.

Der spezifische Code lautet wie folgt:

<!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:&#39;../../Html/JQueryDome/弹框.html&#39;,
                dataType:&#39;html&#39;,
                type:&#39;get&#39;,
                async:true,
                success:function(data){
                    console.log(data);
                   $("#tset").html(data)
                },error:function(){
 
                }
            })
        })
    })
</script>
</html>
Nach dem Login kopieren

Lassen Sie uns abschließend die Methode zum Löschen des Inhalts von DIv zusammenfassen

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

By the Übrigens geben wir auch den Rest. :

Wrapper

wrap()      每一个外面都添加一个新的元素
语法 $(“选择器”).wrap(“<元素名称>”)
wrapAll()    同一包裹一个元素
语法 $(“选择器”).wrap(“<元素名称>”)
wrapInner()  在里面添加一个新的元素
语法 $(“选择器”).wrap(“<元素名称>”)
unwrap()    去掉包裹
语法 $(“选择器”).wrap(“<元素名称>”)
Nach dem Login kopieren

externer Einsatz

after()           在后面插      语法:  $(“选择器”).after(“<元素名称>”)
insertAfter()      在后面插      语法:  $(“选择器”).insertAfter(“<元素名称>”)
before           在后面插      语法:  $(“选择器”).before(“<元素名称>”)
insertBefore()     在后面插      语法:  $(“选择器”).insertBefore(“<元素名称>”)
Nach dem Login kopieren

interner Einsatz(in)

append()         在后面插       语法:  $(“选择器”).append(“<元素名称>”)
appendTo()       在后面插       语法:  $(“<元素名称>”).appendTo(“选择器”)
prepend()        在前面插       语法:  $(“选择器”).prepend(“<元素名称>”)  
prependTo()      在前面插       语法:  $(“<元素名称>”).prependTo(“选择器”)
Nach dem Login kopieren

ersetzen

replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”))
replaceAll    语法 $(“<元素名称>”).replaceAll    (““选择器”
Nach dem Login kopieren

clone 

clone()
Nach dem Login kopieren

Grammatik:

1、$(“选择器”).clone().append(“元素名”)
2、$(“选择器”).append($(“元素名”).clone())
Nach dem Login kopieren

Übrigens ist ein weiterer Punkt (natürlich bin ich in MVC darauf gestoßen, ich bin mir nicht sicher), dass es ihn gibt internes JS in der erhaltenen Webseite, z. B. <script> Hier ist eine Funktion zum Abrufen der Ortszeit </script> Wenn Sie dann AJAX ausführen, wird die Seite nicht zum DIV hinzugefügt, sondern die gesamte Seite die aktuelle Uhrzeit sein (die Adresse ändert sich jedoch nicht). Lösung: Sie können das JS löschen oder das JS durch ein externes JS ersetzen.

Dieser Artikel stammt aus der Spalte JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonAjax-Methode zum Hinzufügen von Webseiten zu div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage