How to insert HTML text to jQuery

Question

I'm learning JavaScript and jQuery. What am I doing wrong here? It will create window but not insert text. Thank you for your help

Script:

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

next problem is that it dont want to load html file

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

You can use .html() and .text() to insert html and text content respectively to target control/element. And also you can use .load() to get content of external html file to control.- Note: this will be a GET request to external file and it has callback convention.

.html and load example. Click html to append a div with id = window and after appending , it will load html into that 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; } 

 <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

You can simply use the .html() method which get the HTML contents of the first element in the set of elements.

If you want to insert just text you can use the function .text() .

Answer 3

You have this: <p style="color: white">HELLO WORLD!</p>

Unless your background color is not white , change the color to any color other than white if you want to see the text. color is to change text color.

Also, you've not added .button7 and #page to the HTML

DEMO