javascript - get an array to print on two lines but its going on one -

i trying teach myself html n javascript dont think i'm doing badly trying array print on 2 lines going on 1 below.

my javascript looks this:

var abc = function(foo, bar) { this.foo=foo; this.bar=bar; }  var def = new abc("foo", ["foo", "bar"]); var ghj = new abc("bar", "foo"); var klm = [def, ghj];  for(var = 0; < klm.length; i++) {     var testpara = document.createelement("p");     var testnode = document.createtextnode(klm[i].foo);     testpara.appendchild(testnode);     document.getelementbyid(foobar).appendchild(testpara);      var testpara1 = document.createelement("p");     var testnode1 = document.createtextnode(klm[i].foo);     testpara.appendchild(testnode);     document.getelementbyid(foobar).appendchild(testpara1); } 

my html this:

<section id="foobar"></section> 

what want print out on page is

foo

foo

bar

bar

foo

but getting is:

foo

foo,bar

bar

foo

i tried putting nested loop split them printed out same thing 20 times before moving on

also have put instances of object array work or there simpler way of doing it?

that's because var def = new abc("foo", ["foo", "bar"]); defines creates object this:

def: {     foo: "foo",     bar: ["foo", "bar"] } 

if want print contents of def.bar on separate lines, either:

• split bar part of def 1 string instead of array; or
• modify function understand bar can array of strings.