Question

我正在使用JQUery并尝试为我的HTML页面创建一个面板。该面板包含多个div。

我的JavaScript功能是：

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

我调用此函数并将其附加到HTML元素的另一个JQuery表示中。问题是它只显示topdiv。我希望它显示底部和顶部div。我是否需要在createQuestionPanel（）方法中包装所有div，还是有更好的方法来执行此操作？

感谢。

Answer 1

只需添加另一个div图层：

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

小提琴：http://jsfiddle.net/maniator/d7MtM/

或者你可以返回一个jQuery对象数组：

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

小提琴：http://jsfiddle.net/maniator/RhCpe/

Answer 2

您可以将它们添加到一起

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

Answer 3

非常简单，用jQuery创建两个元素，给它们不同的文本和add()它们在一起，返回到我认为仍然可读的同一行：

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

为HTML页面创建面板

3 个答案: