Chrome extension adds html to specific div

Question

I am trying to make an extension for chrome that injects html code into a specific div on a specific page.

This is an example of the page where I want to enter the code: http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

So far I have done this: manifest.json:

{
"manifest_version":         2,
"content_scripts":          [ {
    "js":       [ "iframeInjector.js" ],
    "matches":  [   "http://netdna.webdesignerdepot.com/*/*/*"
    ]
} ],
"description":              "Inject html",
"name":                     "Inject html",
"version":                  "1",
"web_accessible_resources": ["test.html"]
}

test.html:

Test html code

iframeInjector.js:

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
document.body.insertBefore (iframe, document.body.openModal);

The example page has a div called "openModal", how can I embed my html code in this div?

Another question: is there a way to read the page title for a variable and use that variable in my html code that Im infecting?

Thank..

Answer 1

, div id="openModal", iframe?

iframeInjector.js

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
var yourDIV = document.getElementById("openModal");
yourDIV.appendChild(iframe);