Question

I am using a javascript form validator, and it creates a div for its error messages. Currently it appends the div to the html body but I would like to change it to append it to a specific div of my choosing. I am new to .js but have given this a shot anyway with no result.

function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
lightbox = document.getElementById('TB_window');
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}

The div being created is the #msg div. From my un-educated mind it looks like line 10 is doing the appending. document.body.appendChild(msg)

I created line 5 the lightbox = document.getElementById(‘TB_window’) which I think (from my limited knowledge) allows me to reference lightbox anywhere in this function. So my thought on line 10 was to do something like;

   document.lightbox.appendChild(msg);

thereby appending the msg div into the TB_window div but it isn’t working… any ideas?

Answer 1

Remove the document prefix, so

lightbox.appendChild(msg);

This will be because lightbox is already referring to a document element, it is in effect saying

document.document.getElementById();

In the same way ATM Machine means Automatic Teller Machine Machine. (Well that’s how I understand it to be anway)