javascript - 如何将 HTML 文本插入 jQuery

Question

我正在学习 JavaScript 和 jQuery。我在这里做错了什么？它将创建窗口但不会插入文本。谢谢您的帮助

脚本:

$(document).ready(function(){
    $('.button7').click(function(){
        $('#page').append('<div id="window"></div>');
            $("#window").load("pages/window1.html");
    });
});

HTML:

<div class="window1">
    <p style="color: white">HELLO WORLD!</p>
</div>

下一个问题是它不想加载 html 文件

    $(document).ready(function() {
   $('.button7').click(function() {
     $('#page').append('<div id="window">NEW DIV ADDED</div>');
     $("#page").find("div").on("ondivload", function() {
       $("#window").load("window1.html", function() {
         alert("now external html loaded");
       });
     });
     alert("now div#window appended");
     $("#page").find("div").trigger("ondivload");

   });

 });

Answer 1

您可以使用.html()和.text()分别向目标控件/元素插入html和文本内容。您还可以使用 .load() 获取要控制的外部 html 文件的内容。- 注意:这将是对外部文件的 GET 请求，并且它具有回调约定.

.html 和 load 示例。单击 html 附加一个 id = window 的 div ，附加后，它将把 html 加载到该 div 窗口中。

 $(document).ready(function() {
   $('#btn').click(function() {

     $('.page').append('<div id="window">NEW DIV ADDED</div>');
     $(".page").find("div").on("ondivload", function() {
       $("#window").load("http://www.w3.org/TR/html4/index/elements.html", function() {
         alert("now external html loaded");
       });
     });
     alert("now div#window appended");
     $(".page").find("div").trigger("ondivload");

   });

 });

 .page {
   border: 5px #CCC solid;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="HTML" id="btn" />
<div class="page">
  OLD Content
</div>