CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Awanti
Awanti

Reputation: 109

How to insert div class into JQuery?

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.

Upvotes: 6

Views: 1322

Answers (3)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 6

vittore
vittore

Reputation: 17579

There are several approaches to do so, and while you can do it in one shot and let DOM parse that fragment itself (see Guruprasad or Delighted answers) you also can chain jquery commands like this:

 $('<div />').addClass('panel panel-default')
      .append('<div />').addClass('panel-heading')
         .append('<h3 />').addClass('panel-title').text('Demo')
         .end().end()
      .append('<div />').addClass('panel-body')
         .append('<div />').attr('id', 'print_received_table')

Upvotes: 3

Wesley Smith
Wesley Smith

Reputation: 19571

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>

Upvotes: 3

Related Questions