如何在函数范围内将div附加到具有特定ID的另一个div

Question

我正在尝试使用通过XML模型进行迭代的简单方法来构建DOM。

我似乎无法引用<div id='content'>来附加我的内容。 我具有以下创建面板的功能：

function getPanelTemplate(controlData)
{
    var header = $('<div/>', 
        {
            'class' :'panel panel-heading',
            'id'    :'header',
            'text'  : $(controlData).attr('label')
        }
    )

    var body = $('<div/>', 
        {
            'class' :'panel panel-body',
            'id'    :'content'
        }
    )                

    var template = $('<div/>', 
        {
            'class':'panel panel-default',
        }
    )

    template.append(header)
    template.append(body)
    return template
}

然后，我有另一个函数调用此函数，然后我要使用该函数将内容添加到“ content” div中：

function createCheckBox(controlData)
{
    var panel = getPanelTemplate(controlData)
    var checkBox = $('<input type="checkbox"/>')

    //panel.content.append(checkbox)
    //panel.getElementByID('content').append(checkbox)
    //$(panel, '#content').append(checkbox)

    return panel
}  

三行注释掉的代码对我来说都不起作用。 有人可以告诉我我在做什么错吗？

另外，我认为jQuery仅具有全局作用域。 我是否认为我不能在仅引用局部变量的函数中使用jQuery？

Answer 1

首先，您已经调用了var checkBox并添加了称为checkbox 。 因此，即使您具有正确的实现，也不会因此而起作用。

要解决您的问题，您可以执行以下操作：

$(panel).find('#content').append(checkBox);

使用上面的代码，您正在寻找一个ID content在panel元素中的元素。