Javascript Can'；t从Chrome扩展插件向页面追加子项

这是简化代码，在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();
});

结果差不多

-编辑-

使用：

工作（使用字符串）：

但是

---

无法工作，如何将节点传递给

code

参数？

您正在将

html

方法的返回值分配给

divNode

您可以在上找到，用作setter的

html

方法返回jQuery对象以允许链式调用

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

你要做的是：

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

var divNode=$（''）.attr（'id'，'layoutVsDesign'）.html（'test'）；
$（“正文”）.append（divNode）//使用jQuery方法附加jQuery对象

否则：

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

var divNode=$（''）.attr（'id'，'layoutVsDesign'）.html（'test'）；
document.body.appendChild（divNode[0]）//使用DOM方法附加DOM节点

如果发布的JS在内容脚本中运行，则不需要jQuery domload事件。内容脚本通常在加载dom后运行。（您可以在清单中更改，但不应更改。）

如果没有jQuery，您的

init（）

将如下所示：

// Create div
var divNode = document.createElement('div');
divNode.id = 'layoutVsDesign';
divNode.innerHTML = 'test';

// Append to open page doc
document.body.appendChild(divNode);

var thatDiv = document.querySelector('#layoutVsDesign');
alert(thatDiv);
this.designPreviewer = thatDiv;

您可以在脚本底部运行

init（）

，而不是在事件处理程序中运行

如果它作为内容脚本运行，则不需要背景页或

executeScript（）

---

您的原始代码有一个jQuery错误，顺便说一句：

document.body.find

不是一个函数。

您好，这是可行的，但它会将节点附加到扩展弹出窗口，我想将其附加到chrome中的当前页面，可以吗？我想您可以使用Hey！有问题，请检查问题的编辑，谢谢！节点[0]属于您的扩展，而不是当前页面。您可以使用chrome.tabs.executeScript（{code:'document.body.innerHTML+='''）使用divNode.html（）将jQuery对象的html作为字符串获取，并使用它构建注入页面的代码

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

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

// Create div
var divNode = document.createElement('div');
divNode.id = 'layoutVsDesign';
divNode.innerHTML = 'test';

// Append to open page doc
document.body.appendChild(divNode);

var thatDiv = document.querySelector('#layoutVsDesign');
alert(thatDiv);
this.designPreviewer = thatDiv;