Adding 2 or more elements to appendChilD

timgerr · Apr 12, 2007

Here is the problem that I am having;
1. I am learning.
2. I have so many questions.

So Here I go and I will be asking many. Thanks ahead of time.

I created this script that will create many text boxes depending on how many times I press the button.

I use the

Code:

document.getElementById('fieldHere').appendChild(addField);

element in this script:

Code:

<html>
<head>
	<title>Want to see if I can do this</title>
	<script type="text/javascript">

	var fieldCount = 0;	
	function addLabel()
	{
		var aLabel = document.createElement('	')
	}
	function AddField()
		{
			fieldCount++;
			var addField 	= document.createElement('input');
			addField.type 	= 'text';
			addField.name 	= 'field' + fieldCount;
			addField.id		= 'field' + fieldCount;
			document.getElementById('fieldHere').appendChild(addField);
		}
	function getInfo()
	{
		// Get the top level div and then searc for all the inputs
		var inputArray = document.getElementById("topOne").getElementsByTagName("input");
		var inputArrayLength = inputArray.length;
		   for (a = 0; a < inputArrayLength; a++) {
		      //filter out the textboxes here
		      if (inputArray[a].type == "text") {
		         alert(inputArray[a].value);
		      }
		   }
	}
	function clearAll()
	{
		 document.getElementById('fieldHere').innerHTML = "";
	}
	</script>
</head>
<body>
	<div id="topOne">
		<input type="button" value="New Field" onclick="AddField()">
		<div id="fieldHere">
		</div>
		<input type="button" value="Click Me" onclick="getInfo()">
		<input type="button" value="Clear"	onclick="clearAll()">
	</div>
</body>
</html>

The problem is that all the text boxes are right next to each other. If I try and do somting like

Code:

function addBreak()
	{
		var aBreak = "<br />";
		document.getElementById('fieldHere').appendChild(aBreak);
		
	}
function AddField()
		{
			fieldCount++;
			var addField 	= document.createElement('input');
			addField.type 	= 'text';
			addField.name 	= 'field' + fieldCount;
			addField.id		= 'field' + fieldCount;
			document.getElementById('fieldHere').appendChild(addField);
			addBreak();
		}

and I get errors when I run the code. Here is what I am asking:
1. When I am running

Code:

 document.getElementById('fieldHere').appendChild(addField);

How can I add multiple things here, like text boxes, breaks or labels?

Thanks again for your help, remember I am still learning.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Apr 12, 2007

Honestly, the quickest way is to use the innerHTML method.

Just type out exactly what you want to add on.
I'll use your code:

Code:

function AddFieldandBreak() {
    fieldCount++;
    document.getElementById('fieldHere').innerHTML += "<input type='text' name='field" + fieldCount + "' id='field" + fieldCount + "' /><br />";    
}

It's very simple and does happen to be the fastest way.

[monkey]

<.

timgerr · Apr 12, 2007

Thanks for th info, here is my question. I have a function that makes many text boxes

Code:

function AddField()
        {
            fieldCount++;
            var addField     = document.createElement('input');
            addField.type     = 'text';
            addField.name     = 'field' + fieldCount;
            addField.id        = 'field' + fieldCount;
            document.getElementById('fieldHere').appendChild(addField);
        }

everytime this is called, a new text box is created keeping the old one. I need this feature.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Apr 12, 2007

What I typed above will create a new text box and keep old ones. It's your addField and addBreak functions rolled into one.

Notice the +=.

Unless you are wanting to create these nodes individually for experience, using innerHTML processes faster.

[monkey]

<.

timgerr · Apr 12, 2007

OK, I now see it. Thanks from a newbie

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Apr 12, 2007

No problem [cheers]

<.

timgerr · Apr 12, 2007

OK I just tested it out. I have noticed 1 problem. When I use your way

Code:

function AddFieldandBreak() {
    fieldCount++;
    document.getElementById('fieldHere').innerHTML += "<input type='text' name='field" + fieldCount + "' id='field" + fieldCount + "' /><br />";    
}

If I add a text box, I fill some information in it, then I add another text box. When the 2nd text box appears, all the data in the first text box dissapears and I then have 2 blank text boxes.

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Apr 12, 2007

I'll test it out real quick.

[monkey]

<.

monksnake · Apr 12, 2007

Works for me, I think that the variable fieldCount is getting reset and creating the same ids on divs.

Here is my javascript on my test:

Code:

<script type="text/javascript">
//Important to be defined OUTSIDE any functions
var fieldCount = 0;

function AddFieldandBreak() {
    fieldCount++;
    document.getElementById('fieldHere').innerHTML += "<input type='text' name='field" + fieldCount + "' id='field" + fieldCount + "' /><br />";    
}
</script>

<.

timgerr · Apr 12, 2007

Ok so you can add a text box, enter some data into that text box then add another textbox? When I do that the data from the first textbox is gone. Here is a both set of codes:

Code:

<html>
<head>
	<title>Want to see if I can do this</title>
	<script type="text/javascript">

	var fieldCount = 0;	
	function addBreak()
	{
		var aBreak = "<br />";
		document.getElementById('fieldHere').appendChild(aBreak);
		
	}
	function AddField()
		{
			fieldCount++;
			var addField 	= document.createElement('input');
			addField.type 	= 'text';
			addField.name 	= 'field' + fieldCount;
			addField.id		= 'field' + fieldCount;
			document.getElementById('fieldHere').appendChild(addField);
			
		}
		
	function AddFieldandBreak() 
	{
    	fieldCount++;
    	document.getElementById('fieldHere').innerHTML += "<input type='text' name='field" + fieldCount + "' id='field" + fieldCount + 
    					"' /><br />";    
	}

function getInfo()
	{
		// Get the top level div and then searc for all the inputs
		var inputArray = document.getElementById("topOne").getElementsByTagName("input");
		var inputArrayLength = inputArray.length;
		   for (a = 0; a < inputArrayLength; a++) {
		      //filter out the textboxes here
		      if (inputArray[a].type == "text") {
		         alert(inputArray[a].value);
		      }
		   }
	}
	function clearAll()
	{
		 document.getElementById('fieldHere').innerHTML = "";
	}
	</script>
</head>
<body>
	<div id="topOne">
		<input type="button" value="New Way" onclick="AddFieldandBreak()">
		<input type="button" value="Old Way" onclick="AddField()">
		<div id="fieldHere">
		</div>
		<input type="button" value="Click Me" onclick="getInfo()">
		<input type="button" value="Clear"	onclick="clearAll()">
	</div>
</body>
</html>

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Apr 12, 2007

Interesting, in IE it maintains it's values, in FF, it loses them.

Ok, I corrected your old way for you. I see it does keep values in FF. Thanks for making me aware of that, I'll look into it tomorrow.

Meanwhile, here is your "old" way fixed.

Code:

    function addBreak()
    {
        [!]var aBreak = document.createElement('br');[/!]
        document.getElementById('fieldHere').appendChild(aBreak);
        
    }
    function AddField()
        {
            fieldCount++;
            var addField     = document.createElement('input');
            addField.type     = 'text';
            addField.name     = 'field' + fieldCount;
            addField.id        = 'field' + fieldCount;
            document.getElementById('fieldHere').appendChild(addField);
            addBreak();
        }

<.

timgerr · Apr 13, 2007

Thanks, I never tried it in IE.... have to start doing that. Thanks again

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Apr 13, 2007

Honestly, you want it to work in FF before IE. IE is a piece of garbage. I, out of bad habit, always default to IE6.

[monkey]

<.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Adding 2 or more elements to appendChilD

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

Similar threads

Part and Inventory Search

Sponsor