Question

很难将元素添加到另一个元素中。我的方法很独特。基本上用户要么输入选择器，要么默认情况下是文档。

所以我们有2个按钮，一个用于指定选择器，另一个用于指定选择器。

<button onClick="callFunction({where:'#test'})"> Test selector</button>
<button onClick="callFunction()"> default</button>

和函数“callFunction”：

function callFunction(arguments){
    scope= (arguments.where===undefined? $(document) : $(arguments.where));
    createElementIn(scope);
}

然后调用createElementIn（scope）函数并在给定的

选择器中创建元素

function createElementIn(scope){
var newdiv = document.createElement('div');
       $(newdiv).css("position", "absolute");
       $(newdiv).css("left", "500px");
       $(newdiv).css("bottom", "500px");
       $(newdiv).css("display", "block");
       newdiv.innerHTML = str;
       scope.append(newdiv);//Over here, it does not append

}

我有一种感觉即混合什么时候做$（范围）......什么时候离开它... document.body.appendChild有效，但我无法将document.body传递到范围内。请问，解决这个问题的方法是什么？

Answer 1

默认范围应该是body元素 - 而不是文档，因为元素的绝对定位，元素也不可见。

您使用的是本机和jQuery的混合，我已将其更新为jQuery解决方案 - 您可以为.css({...})方法添加其他样式

function callFunction(params){
    var scope= ($.isPlainObject(params) && params.where) ? $(params.where) : $('body');
    createElementIn(scope);
}
function createElementIn(scope){
    var newdiv = $('<div />', {
        html: 'some content'
    }).css({
        //position: 'absolute',
        display: 'block',
    })
    scope.append(newdiv);
}

演示：Fiddle

Answer 2

尝试：

function createElementIn(scope){
    $('<div/>').css({
        position: "absolute",
        left: "500px",
        bottom: "500px",
        display: "block"
    }).appendTo(scope);
}

Answer 3

您正在将jQuery与本机javascript混合使用。仅使用jQuery来避免误解。

我遇到过在jquery选择器之前使用$前缀的做法，例如你可以写：

var $scope = (arguments.where===undefined? $(document) : $(arguments.where));
...
$scope.append(newdiv)

在这种情况下，你会知道，不需要用jQuery包装$ scope，如$（$ scope）

根据非null将元素添加到文档OR元素

3 个答案: