prototype: How to wrap an input field with span tag...

[markjohnson]

Hello everyone,

I am not at all a JavaScript expert so please bear with me.

Please have a look at the following code:

		add_option_link.onclick = function() {
				j++;
				
				var tr = document.createElement("tr");

				var td = document.createElement("td");
				Element.insert(td, "Option " + j);
				tr.appendChild(td);

				var td = document.createElement("td");
				var input = document.createElement("input");
				input.name = "options["+i+"][option]["+j+"][display]";
				Element.insert(td, input);			
				tr.appendChild(td);

				var td = document.createElement("td");				
				var input = document.createElement("input");
				input.name = "options["+i+"][option]["+j+"][option_number]";
				Element.insert(td, input);
				tr.appendChild(td);

				var td = document.createElement("td");
				var input = document.createElement("input");
				input.name = "options["+i+"][option]["+j+"][price]";
				Element.insert(td, input);
				tr.appendChild(td);
				
				var td = document.createElement("td");
				var a = document.createElement("a");
				a.href = "";
				Element.insert(a, "delete");
				a.onclick = function() {
					tr = this.parentNode.parentNode;
					Element.remove(tr);
					return false;
				}
				Element.insert(td, a);
				tr.appendChild(td);

				Element.insert(options_table, tr);
				
				return false;
			}

This is obviously generating tr's and td's with input fields in them.

I would like the input field marked in red above (lines 25, 26) to be wrapped by <span> tags...

Hence, it should appear in HTML as follows:

<span id="sprytextfield1">
<input name="options[1][option][1][option_number]"/>
<span class="textfieldRequiredMsg">A value is required.</span></span>

I have no idea how to achieve this with the code above, and any help will be greatly appreciated.

Many thanks!