Adding elements to a page

[lukeurtnowski]

Im trying to figure out how to add an element to a div, like
http://fixmysite.us/Web_Programming_With_Javascriipt/Assignment8
Thats the inner HTML way and heres the function

function addContent() {

var UserInput = document.getElementById("Input").value;
var UserOutput = document.getElementById("Listing");

UserOutput.innerHTML += "<li><p>"+UserInput+"</p></li>";
}

But the assignment is to accomplish the same method using the DOM, heres what I have

    function addContent() {

var UserInput = document.getElementById("Input").value;
var UserOutput = document.getElementById("Output");

var p = document.createElement("P");        
var t = document.createTextNode(UserInput);      
p.appendChild(t);       
document.getElementsByID("t").appendChild(p);  
}

With the new method, is there no way to add a list in there so I can keep track?

[m3g4p0p]

Sometimes the console can give you some useful hints. ;-) There is no such function as document.getElementsById() since an ID is always (well, should be) unique.

[lukeurtnowski]

thank.,s made the change to

function addContent() {

var UserInput = document.getElementById("Input").value;
var UserOutput = document.getElementById("Output");


var p = document.createElement("P");        
var t = document.createTextNode(UserInput);      
p.appendChild(t);       
UserOutput.appendChild(p);  
}

heres the result

so it seems to be working. The only thing im wondering is how can I get each output to be numbered like

[m3g4p0p]

@lukeurtnowski

how can I get each output to be numbered

You could append the input as <li> elements to an <ol> (= ordered list) element. This way they’ll be numbered automatically.

[felgall]

@lukeurtnowski

The only thing im wondering is how can I get each output to be numbered l

The first and last of the following commands are only needed once - the ones in the middle relace your current code to create a list instead of a series of paragraphs.

var ol = document.createElement("ol");   

var li = document.createElement('li');
ol.appendChild(li); 
var t = document.createTextNode(UserInput);      
li.appendChild(t); 

document.getElementByID("t").appendChild(ol);