HTML shows as plain text when inserted into webpage

Question

I am developing a chrome extension and I want it to insert an iframe into the Google homepage, but the html just shows as plain text. Why does this happen?

Here is my code currently:

manifest.json

{
    "manifest_version": 2,
    "name": "Google",
    "version": "1.0",
    "description": "Google iframe",
    "icons": {
        "48": "img/rsz_apple-touch-icon-144x144.png",
        "16": "img/favicon-16x16.png",
        "128": "img/rsz_1apple-touch-icon-144x144.png"
    },
    "content_scripts": [{
        "matches": ["https://www.google.com.au/"],
        "js": ["content-script.js"]
    }],
    "browser_action": {
        "default_icon": "img/favicon-16x16.png",
        "default_title": "Press the button to see more actions",
        "default_popup": "popup.html"
    },
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "activeTab"
    ]
}

content-script.js

var div=document.createElement("div"); 
document.getElementById("searchform").appendChild(div);
div.innerText="<iframe src='https://www.google.com.au/'>ERROR</iframe>";

Here is what it shows:

Thank you for any help.

Answer 1

innerText retrieves and sets the content as plain text. If you want to set HTML, use innerHTML.

var div=document.createElement("div"); 
document.getElementById("searchform").appendChild(div);
div.innerHTML="<iframe src='https://www.google.com.au/'>ERROR</iframe>";