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为div的{{1}}，并在附加后，将html加载到该div窗口。

window

 $(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;
 }

Answer 2

您可以简单地使用.html()方法获取元素集中第一个元素的HTML内容。

如果您只想插入文字，可以使用.text()功能。

Answer 3

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

除非您的背景颜色不是white，否则如果您想查看文字，请将color更改为white以外的任何颜色。 color将更改文字颜色。

此外，您尚未将.button7和#page添加到HTML

<强> DEMO

如何将HTML文本插入jQuery

3 个答案: