javascript document.createElement function?

Question

I have a variable which contains 3 tag names which are separated from each other by a "," character. I want to split them appart with .split() function and then create and append 3 elements to the document body.

<head>
<style>
div { height:500px; width:500px; background:#F00; float:left}   
span{display:block; float:right}   
</style>

<script type="text/javascript">

var element= div,p,span;    
var j=element.split(',')

for(i=0;i<j.length;i++){            
    var crt=document.createElement(j[i])
}

document.body.append(crt)

</script>    
</head>    
<body>
</body>

is the final result supposed to be <div></div><p></p><span></span> or <div><p><span></span></p></div> ? — Alnitak
– Alnitak, Commented Mar 23, 2012 at 10:06

Philip Raath · Accepted Answer · 2016-03-11 19:28:53Z

5

Your 'element' variable needs to be a string. You need to use appendChild() rather than append(), and the appendChild() call should be inside your loop:

var element = "div,p,span";
var j = element.split(',');
var crt;

for(var i = 0; i < j.length; i++) {
    crt = document.createElement(j[i]);
    document.body.appendChild(crt);
}

http://jsfiddle.net/infernalbadger/wEBqY/1

edited Mar 11, 2016 at 19:28

Philip Raath

4885 silver badges18 bronze badges

answered Mar 23, 2012 at 10:08

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

otakustay · Accepted Answer · 2012-03-23 10:03:55Z

1

This code seems well, except 2 points:

var element = div,p,span is not a valid statement, you shoudl wrap quote (") to create a string: var element = 'div,p,span';
You should put the statement document.body.append(crt) in your for loop so that each element would be append to <body>.

answered Mar 23, 2012 at 10:03

otakustay

12.6k6 gold badges41 silver badges45 bronze badges

Comments

slash197 · Accepted Answer · 2012-03-23 10:04:35Z

1

Try this

for(i=0; i<j.length; i++)
{            
    var crt = document.createElement(j[i]);
    document.body.append(crt);
}

answered Mar 23, 2012 at 10:04

slash197

9,0246 gold badges44 silver badges71 bronze badges

1 Comment

slash197 Over a year ago

It's not working because you have other problems in your code such as var element= div,p,span; should be a string enclosed in quotes.

mplungjan · Accepted Answer · 2012-03-23 10:31:05Z

1

What the others said PLUS you need to do this onload DEMO:

<head>
<style>
div { height:500px; width:500px; background:#F00; float:left}   
span{display:block; float:right}   
</style>

<script type="text/javascript">

var elements= ["div","p","span"];    

window.onload=function() {
  for(var crt,i=0, n=elements.length;i<n;i++){            
    crt=document.createElement(elements[i])
    document.body.appendChild(crt)
  }
}
</script>    
</head>    
<body>
</body>

edited Mar 23, 2012 at 10:31

answered Mar 23, 2012 at 10:15

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

ZER0 · Accepted Answer · 2012-03-23 10:42:09Z

0

var tags = "div,p,span".split(",");

for (var i=0, tag; tag = tags[i++];)
    document.body.appendChild(document.createElement(tag));

However, the body tag is not parsed yet by the browser when you're executing this code, so you should put this code after the <body> or run it when the DOM is loaded (onload event or DOMContentLoaded if supported).

You could also use forEach where is supported (ES5, there are plenty of shims, also in the MDN page I linked):

var tags = "div,p,span".split(",");

tags.forEach(function(tag) {
    document.body.appendChild(document.createElement(tag));
});

Or if you're using any support library (jquery, underscore, etc) they provide equivalent function.

answered Mar 23, 2012 at 10:42

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

Collectives™ on Stack Overflow

javascript document.createElement function?

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related