[SOLVED] DOM styling

[seventheyejosh]

hello all! I'm basically appending an input to a div. I need to do multiple ones, so innerHTML+= won't work, as they'll lose their value, unless i make a for function that'll repopulate them etc. But i'd much rather learn how to style the appended items. Here is what I have

 

var ok_val=document.getElementById('existing_field_name').value;

			if(ok_val!=''){

			var input = document.createElement('INPUT');

			input.setAttribute('type', 'text');

			input.setAttribute('name', ok_val);

			input.setAttribute('value', '');

                                ///the following addes the input, just no style

			document.getElementById('added_results').appendChild(input);
                                
                                ///this one adds it all how i want it, but when you put some text in the input, then add another the value is lost.

			document.getElementById('added_results').innerHTML+='<div class=formcontainer><div class=formlabel>'+ok_val+':</div><div class=forminput><input type=text name='+ok_val+'></div></div>';

				}

			document.getElementById('existing_field_name').value='';

			return false;"

 

I tried doing appendChild('<div>'+input+'</div>'); , but all i got was invalid xml errors. I ran through w3schools and google, and had no luck.

 

My question is, how do you style something that you append something to?

 

THanks in advance.

[seventheyejosh]

Crash course in DOM FTW...

 

onclick="

			var ok_val=document.getElementById('existing_field_name').value;

			if(ok_val!=''){

			var div1 = document.createElement('DIV');

				div1.id = ok_val+'1';

				div1.className = 'formcontainer';

			var div2 = document.createElement('DIV');

				div2.id = ok_val+'2';

				div2.className = 'formlabel';

				div2.innerHTML = ok_val;

			var div3 = document.createElement('DIV');

				div3.id = ok_val+'3';

				div3.className = 'forminput';

			var input = document.createElement('INPUT');

				input.setAttribute('type', 'text');

				input.setAttribute('name', ok_val);

				input.setAttribute('value', '');



			document.getElementById('added_results').appendChild(div1);

			document.getElementById(ok_val+'1').appendChild(div2);

			document.getElementById(ok_val+'1').appendChild(div3);

			document.getElementById(ok_val+'3').appendChild(input);

				}

			document.getElementById('existing_field_name').value='';

			return false;"

 

:D:D

 

solved