CODEWITHSUNDEEP
javascriptjqueryhtml
dublintech
dublintech

Reputation: 17785

Create panel for HTML page

I am using JQUery and trying to create a panel for my HTML page. The panel contains mutiple divs.

My JavaScript function is:

function createQuestionPanel() {
    var topDiv = $('<div>top div</div>');
    var questionDiv = $('<div>bottom div</div>');
    topDiv.after(questionDiv);
    return topDiv;
}

I call this function and append it to another JQuery representation of a HTML element. The problem is it only displays the topdiv. I want it to display both the bottom and top div. Do I need to wrap all the divs in my createQuestionPanel() method or is there a better way to do this?

Thanks.

Upvotes: 0

Views: 3541

Answers (3)

adeneo
adeneo

Reputation: 318182

Pretty straight forward, create two elements with jQuery, give them different text and add() them together, returned in the same line as it's still readable in my opinion :

function createQuestionPanel() {
  return $('<div />', {text: 'top div'}).add($('<div />', {text: 'bottom div'}));
}

Upvotes: 0

Naftali
Naftali

Reputation: 146302

Just add another div layer:

function createQuestionPanel() {
    var div = $('<div>');
    $('<div>top div</div>').appendTo(div);
    $('<div>bottom div</div>').appendTo(div);
    return div;
}

Fiddle: http://jsfiddle.net/maniator/d7MtM/

Or you can return an array of jQuery objects:

function createQuestionPanel() {
    var topDiv = $('<div>top div</div>');
    var questionDiv = $('<div>bottom div</div>');
    return [topDiv, questionDiv];
}

Fiddle: http://jsfiddle.net/maniator/RhCpe/

Upvotes: 3

Akhil F
Akhil F

Reputation: 7740

You can just add them together

function createQuestionPanel() {
    var div = $('<div>top div</div><div>bottom div</div>');
    return div;
}

Upvotes: 1

Related Questions