Question

Searched far and wide here, but can’t seem to find the answer!
This is homework! So I do not expect anyone to write anything for me, just to help me 🙂

I am attempting to have a HTML message box with a post button. When the post button is clicked, the message, along with the date is posted into a div bellow. This can be done many times, with the newest ones being published under the oldest ones. The way I am trying, is to create a new div every time, and assign them all to the same class that is in my CSS document. The message and date must be in separate ‘p’ tags with their own class assigned. If anyone knows a better approach, I’m all ears. Although, my Javascript document must be external.

I currently have this code:

function createComment(){
var message = "";
var divTag = document.createElement("div");
divTag.className = "commentDiv";
divTag.innerHTML = Date();
message=document.getElementById("textBox").value;
document.getElementById("comments").innerHTML=message;
}

I am attempting to create the div, then give it an ID of ‘commentDiv’, since that is the div ID in my CSS document that is already styled. I then post the date in the inner HTML, and save the value from the text box into a variable, named ‘message’. I then try to attempt to print the message into a paragraph tag with the ID of ‘comments’. I am VERY new to web Javascript. So honestly, I don’t really know what I’m doing haha.
All help is greatly appreciated. Thanks!

Answer 1

I think what you are looking for is something like

var ct = document.getElementById('comments')

function create(){
    var divTag = document.createElement('div');
    divTag.className = 'comment';

    var p1 = document.createElement('p');
    p1.className = 'date';
    p1.innerHTML = new Date();
    divTag.appendChild(p1)

    var p2 = document.createElement('p');
    p2.className = 'message';
    p2.innerHTML = 'nop';
    divTag.appendChild(p2);

    ct.appendChild(divTag);
}

Demo: Fiddle.

The appendChild() can be used to append child element to a node.