javascript - 无法从 Chrome 扩展程序将 child 附加到页面

Question

这是简化的代码，它在 appendChild 行之后停止工作:

$preview = {
    designImg: '',
    thePage: null,
    designPreviewer: null,
    init: function(){
        var divNode = $('<div>').attr('id','layoutVsDesign').html('test');
        document.body.appendChild( divNode );
        alert('I never happen');
        this.designPreviewer = document.body.find('#designPreviewer');
    }
};

$(document).ready(function(){
    $preview.init();
});

知道我错过了什么吗？

我也试过:

chrome.extension.getBackgroundPage().appendChild()

几乎相同的结果

-编辑-

使用 content scripts :

有效(接受一个字符串):

chrome.tabs.executeScript({
   code: 'document.body.style.display = "none"'
});

但是

chrome.tabs.executeScript({
   code: 'document.body.appendChild("<div>tttttttesttt</div>")'
});

或

chrome.tabs.executeScript({
   code: 'document.body.appendChild(node[0])'
});

不行，如何将节点传递给code参数？

Answer 1

您正在将 html 方法的返回值分配给 divNode

您可以在 jQuery documentation 上找到, html 方法用作 setter 返回 jQuery 对象以允许链式调用。

因此，您试图将 jQuery 对象附加到 DOM 节点，这是无效的。

你要做的是:

var divNode = $('<div>').attr('id','layoutVsDesign').html('test');        
$("body").append( divNode ); //append a jQuery object using jQuery method

否则:

var divNode = $('<div>').attr('id','layoutVsDesign').html('test');        
document.body.appendChild( divNode[0] ); //append a DOM node with DOM method