如何將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> 

Answer 2

您只需使用.html()方法即可獲取元素集中第一個元素的HTML內容。

如果只想插入文本，則可以使用.text（）函數。

Answer 3

你有這個： <p style="color: white">HELLO WORLD!</p>

除非你的背景顏色不是white ，改變color比其他任何顏色white ，如果你想看到的文字。 color是改變文本的顏色。

另外，您還沒有在HTML中添加.button7和#page

演示