CODEWITHSUNDEEP
jqueryhtml
abhillier
abhillier

Reputation: 214

Displaying div element on jQuery

Hi i am trying to display the more than one div into jQuery code. But it is displaying blank page.

I am not able to figure out what is going wrong.

Here is my code

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var parent = document.createElement("div");
    parent.className="panel panel-default";

    var heading = document.createElement("div");
    heading.className="panel-heading";

    var h3=document.createElement("h3");
    h3.className="panel-title";
    h3.setAttribute('id','panel_title');

    var t = document.createTextNode("DEMO"); 
    h3.appendChild(t);
    heading.appendChild(h3);

    var pbody=document.createElement('div');
    pbody.className="panel-body";

    var prTable=document.createElement('div');
    prTable.setAttribute('id','print_received_table');
    pbody.appendChild(prTable);

    parent.appendChild(heading);
    parent.appendChild(pbody);
    });
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

Upvotes: 3

Views: 75

Answers (2)

mplungjan
mplungjan

Reputation: 178422

  1. Why jQuery and then not use it.
  2. You do not add the generated objects to the body (or result). document.body.appendChild(parent) or $("body").append(parent) or parent.appendTo("body") will work here

non jQuery version

 window.onload=function() {
    var parent = document.createElement("div");
    parent.className="panel panel-default";

    var heading = document.createElement("div");
    heading.className="panel-heading";

    var h3=document.createElement("h3");
    h3.className="panel-title";
    h3.setAttribute('id','panel_title');

    var t = document.createTextNode("DEMO"); 
    h3.appendChild(t);
    heading.appendChild(h3);

    var pbody=document.createElement('div');
    pbody.className="panel-body";

    var prTable=document.createElement('div');
    prTable.setAttribute('id','print_received_table');
    pbody.appendChild(prTable);

    parent.appendChild(heading);
    parent.appendChild(pbody);
    document.body.appendChild(parent);
 }

jQuery version

$(function() {
    var parent = $("<div/>");
    parent.addClass("panel panel-default");

    var heading = $("<div/>");
    heading.addClass("panel-heading");

    var h3=$("<h3/>");
    h3.addClass("panel-title")
      .attr('id','panel_title')
      .text("DEMO"); 

    /* NOTE: The above can be written like this
    var h3 = $("<h3/>", {
     text: "DEMO",
    class: "panel-title",
       id: 'panel_title'
    });
    */

    heading.append(h3);

    var pbody=$("<div/>");
    pbody.addClass("panel-body");

    var prTable=$("<div/>")
    prTable.attr('id','print_received_table');
    pbody.append(prTable);

    parent.append(heading);
    parent.append(pbody);
    $("body").append(parent);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 4

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Guess you wanna append into #result element, every elements created so far did't added into page unless you append into body or element that already existed on that page, use below code to append into element with id result :

......
parent.appendChild(pbody);
// append parent element into result element
document.getElementById('result').appendChild(parent);

Upvotes: 0

Related Questions