如何将HTML文本插入jQuery

How to insert HTML text to jQuery

本文关键字：插入 jQuery 文本 HTML      更新时间：2023-09-26

我正在学习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");
   });
 });
可以使用

.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>

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

如果你只想插入文本，你可以使用函数 .text((。

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

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

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

演示

相关文章：