seventheyejosh Posted August 6, 2009 Share Posted August 6, 2009 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. Link to comment https://forums.phpfreaks.com/topic/169114-solved-dom-styling/ Share on other sites More sharing options...
seventheyejosh Posted August 6, 2009 Author Share Posted August 6, 2009 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 Link to comment https://forums.phpfreaks.com/topic/169114-solved-dom-styling/#findComment-892266 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.