How to insert div class into JQuery?

Question

Hi i am trying to write the bootstrap panel head and body in JQuery.

Here is my HTML code:

<div class="panel panel-default">
        <div class="panel-heading">
                <h3 class="panel-title" id="panel_title">Demo</h3>
        </div>
        <div class="panel-body">
                <div id=print_received_table></div>
        </div>
</div>

If it is one div element we can create like this document.createElement('div') but what about if it is more than one div.

This class <div class="panel panel-default"> i would like to make the parent node.

I am stuck here only. please suggest me how to do?

Any help will be appreciated. Thanks in advance.

Answer 1

You can do it as below:

var element=$('<div class="panel panel-default">'
              +'<div class="panel-heading">'
              +'<h3 class="panel-title" id="panel_title">Demo</h3>'
              +'</div>'
              +'<div class="panel-body">'
              +'<div id="print_received_table"></div>'
              +'</div>'
              +'</div>'
            );

Now you can use the element and append it anywhere in the DOM as below:

$('yourselectorID').append(element);

Other option would be creating element one by one and then appending it according to its structure finally appending it to DOM as below:

var parent=$('<div/>', {
    class: 'panel panel-default',
});

var heading=$('<div/>', {
    class: 'panel-heading',
});

var h3=$('<h3/>', {
    class: 'panel-title',
    id:'panel_title',
    text:'Demo'
});

var body=$('<div/>', {
    class: 'panel-body',
});

var prTable=$('<div/>', {
    id: 'print_received_table',
});

heading.append(h3);
body.append(prTable);
var element=parent.append(heading).append(body);

Now you have your element which can be appended to DOM using same .append method mentioned previously. But as of my opinion this feels fishy and difficult to read, and this is just one more way to do it.

---

UPDATE

The method your are asking me to show is using pure javascript and you can use appendChild and className etc as below:

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);

Now you can use parent element to append it anywhere in DOM using appendChild

Answer 2

Pass the full html string to the constructor like this:

var element = '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title" id="panel_title">Demo</h3></div><div class="panel-body"><div id=print_received_table></div></div></div>';


$('#result').append(element);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"><?div>