div - createElement is not working?

Question

I'm trying to create the div tag using javascript.? But why it is not working? I have seen the document.createElement not working

Javascript createElement() not working in Chrome But these answers are not suited for my script.

<html>
<head>
<script>
var div = '<div id = con style="width:auto; height:200px; Background:#2a2a2a">';
var x = document.createElement(div);
var y = document.getElementById('con');
y.innerHTML = "hello world";
document.body.appendChild(x);
</script>
</head>
<body>
</body>
</html>

How can I do it?

You forget to wrap your `div` in quotes: `createElement('div')` — antyrat, Feb 11 '15 at 12:04

jAndy · Answer 1 · 2015-02-11T12:19:17.087

5

It doesn't work like so. .createElement() only excepts the type of element you want to create, no predefined HTML snippet. So you have to create a Div Element using document.createElement('div'); and work on that element afterwards. Like

For Instance

var div = document.createElement('div');
    div.id = 'con';
    div.style.cssText = "width:auto; height:200px; Background:#2a2a2a";

document.body.appendChild( div );

If you don't need a reference to an Element and you only want to insert new HTML code, you can also use Element.prototype.insertAdjacentHTML() like so

document.body.insertAdjacentHTML( 'beforeend', '<div id="con" style="width:auto; height:200px; Background:#2a2a2a">');

A further problem of your code here is that you try to access the DOM too early. Even if the code would work in its current form, you cannot access document.body in your <head> section because it wasn't fully initialized at that point. Either move the entire <script> source into the <body> section or attach a listener to DOMContentLoaded Event.

edited Feb 11 '15 at 12:19

answered Feb 11 '15 at 12:05

jAndy

231,737
57
305
359

This is the correct answer. With plain JS, you need to define the attributes manually after creating the element with the tag name. If you want to create elements from HTML snippets, use jQuery or something like that. – This company is turning evil. Feb 11 '15 at 12:08
@user3384402 Well it should, what is the problem over there ? – jAndy Feb 11 '15 at 12:17
@jAndy I use your code and extra added `var he = document.getElementById('con'); he.innerHTML = ("Hello world");` then i run it not give the result. – Feb 11 '15 at 12:24
@user3384402 I updated the answer. There are some more problematic things in your code you need to fix. – jAndy Feb 11 '15 at 12:25

score 3 · Accepted Answer · answered Feb 11 '15 at 12:10

3

If you want to insert entire HTML structure all at once, you can use very useful, cross-browser and unfairly little known insertAdjacentHTML method:

var div = '<div id="con" style="width:auto; height:200px; Background:#2a2a2a"></div>';
document.body.insertAdjacentHTML('beforeend', div);
var y = document.getElementById('con');
y.innerHTML = "hello world";

answered Feb 11 '15 at 12:10

dfsq

191,768
25
236
258

Thank you for your answer. Inside the which is perfectly run. But i need to put inside the . Im try it which is not working – Feb 11 '15 at 13:02
When you put this code in `head`, by the time it's executed there is no `` tag yet. So in order it to work in head you need to wrap it in for example in `window.onload` event: `window.onload = function() { /* code in answer*/ }`. – dfsq Feb 11 '15 at 13:04

score 1 · Answer 3 · answered Feb 11 '15 at 12:08

You cannot create a predefined html like that, also since you are appending to body, the script should be inside the body element not in head

<html>
    <head>
    </head>
    <body>
        <script>
            var x = document.createElement('div');
            x.id = 'con';
            x.style.width = 'auto';
            x.style.height = '200px';
            x.style.background = '#2a2a2a';
            x.innerHTML = "hello world";
            document.body.appendChild(x);
            //no need to access `y` by id, use the reference returned by createElement to set the content
            //var y = document.getElementById('con');
            //y.innerHTML = "hello world";
        </script>
    </body>
</html>

div - createElement is not working?

3 Answers3

Linked