如何编写返回新 div 的 JQuery 函数？答案

【问题标题】：How to write in JQuery function which return new div?如何编写返回新 div 的 JQuery 函数？
【发布时间】：2011-03-15 08:46:25
【问题描述】：

如何在 JQuery 中编写返回新 div 的函数？（我得到类似参数来运行某个对象，基于该对象和属性，我需要在 div 中返回不同的颜色和文本。例如：如果我得到 F，我画红色并写“火”，如果我得到 W，我画蓝色并写“水”）。谁能帮忙

【问题讨论】：

标签： jquery

【解决方案1】：

function getADiv() {
    return $('<div/>', {
        text: 'hello',
        color: 'red'
    });
}

【讨论】：

哦，有趣！这个语法是在哪个版本的 jQuery 中创建的？
@subtenante，自黑暗时代以来，它就是 $ 函数。

【解决方案2】：

嗯，是这样的吗？

function makeDiv(type){
    var params;
    if(type == "F"){
        params = {text: "fire", color: "red"};
    }
    else if(type == "W"){
        params = {text: "water", color: "blue"};
    }
    else return null;

    return $("<div>")
        .text(params.text)
        .css("color", params.color);
}

【讨论】：

【解决方案3】：

我的看法：

var newDiv = function(options){
    var html = '<div class="';

    if(options.color == 'R')
        html += 'rubyred';

    html += '">Element: ' + options.element + '</div>';
    return $(html);
};

var myNewDiv = newDiv({ color: 'R', element: 'fire' });

或者，更简单（不那么花哨）：

var newDiv = function(letter){
    var $d = $('<div>');

    if(letter == 'F')
        $d.html('fire').css('color', 'red');
    else if(letter == 'W')
        $d.html('water').css('color', 'blue');

    return $d;
};

var waterDiv = newDiv('W');

【讨论】：

【解决方案4】：

应该这样做：

function createDiv(type) {
    switch (type.toLowerCase()) {
        case 'f':
            return $('<div>').css({ color: 'red' }).text('Fire');
            break;

        case 'w':
            return $('<div>').css({ color: 'blue' }).text('Water');
            break;
    }
}

Live example here.

【讨论】：