Can't append a child to page from a Chrome extension

Question

This is the simplified code, it's stops working after the appendChild line: ``` $preview = { designImg: '', thePage: null, designPreviewer: null, init: function(){ var divNode = $('

').attr('id','layoutVsDesign').html('test'); document.body.appendChild( divNode ); alert('I never happen'); this.designPreviewer = document.body.find('#designPreviewer'); } }; $(document).ready(function(){ $preview.init(); }); ``` Any idea what I am missing? I also tried: ``` chrome.extension.getBackgroundPage().appendChild() ``` With pretty much the same result -EDIT- Using content scripts: works (takes a string): ``` chrome.tabs.executeScript({ code: 'document.body.style.display = "none"' }); ``` But ``` chrome.tabs.executeScript({ code: 'document.body.appendChild("

tttttttesttt

")' }); ``` or ``` chrome.tabs.executeScript({ code: 'document.body.appendChild(node[0])' }); ``` Won't work, how can I pass the node to the `code` parameter?

Accepted Answer

You are assigning the return value of `html` method to `divNode` As you can find on jQuery documentation, `html` method used as a setter return the jQuery object to allow for chained calls. So, you are trying to append a jQuery object to a DOM node, which is not valid. What you have to do is: ``` var divNode = $('

').attr('id','layoutVsDesign').html('test'); $("body").append( divNode ); //append a jQuery object using jQuery method ``` or otherwise: ``` var divNode = $('

').attr('id','layoutVsDesign').html('test'); document.body.appendChild( divNode[0] ); //append a DOM node with DOM method ```

Can't append a child to page from a Chrome extension

Solution

Problem