javascript - 如何在函数范围内将一个 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
}

然后我有另一个调用这个函数的函数，然后我想用它向“内容”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);

使用上面的代码，您要在 panel 元素中查找 ID 为 content 的元素。