javascript - 为 HTML 页面创建面板

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。我是否需要将所有 div 包装在我的 createQuestionPanel() 方法中，还是有更好的方法来做到这一点？

谢谢。

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