jQuery .load() doesn't work on a newly created DOM div element

Question

This is my code:

$(document).ready(function(){


    var searchDom = document.createElement('div');
    searchDom.className = "popContainer";
    searchDom.style.cssText = [
      'background-color: #ffd700;',
      'background-image: -webkit-repeating-linear-gradient(' +
          '45deg, transparent, transparent 35px,' +
          'rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);',
      'color: #efefef;',
      'padding: 10px;',
      'font: 14px Arial;'
    ].join(' ');
    document.body.style.cssText = 'position: relative';
    document.body.parentElement.insertBefore(searchDom, document.body);


var greeting = "hola";
var button = document.getElementById("navSearch");
button.person_name = "Roberto";
button.addEventListener("keydown", function() {
$('.popContainer').load('popup.html');
alert(greeting);
}, false);
 });

So basically i'm creating a new DOM element with the class name "popContainer" and trying to populate the content from popup.html to it when a user starts to type. This isn't working, i tried using .post with no success and i can't figure out if and how .live would be used here.

please notice that this file is a part of a chrome extension and that the alert() does work properly.

Answer 1

I think your load should look something like this....

$('.popContainer').load(chrome.extension.getURL('popup.html'));

also, this question might help you......
With a chrome extension how can add html to just below the body tag of a page?