html - Displaying div element on jQuery -
hi trying display more 1 div jquery code. displaying blank page.
i not able figure out going wrong.
here 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>
- why jquery , not use it.
- you not add generated objects body (or result).
document.body.appendchild(parent)
or$("body").append(parent)
orparent.appendto("body")
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: above can written 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>
Comments
Post a Comment