Menu
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>
363
asked Nov 19 '25 16:11
document.body.appendChild(parent) or $("body").append(parent) or parent.appendTo("body") will work herenon 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
