insert html

[dean5000v]

//Create the Company Name text field
var CompanyName = document.createElement('input');
CompanyName.type = 'text';
CompanyName.id = 'CompanyName';
CompanyName.name = 'CompanyName';
CompanyName.style.width = '200px';
CompanyName.onkeyup = CompanyName_func;

hey well i have some code that creates text fields and then it puts the contents into a div tag below is the code. the problem i am having now is to actually insert a caption for the text fields, so next to each one i would like it to say something like. Company Name:

//put values into company name div tag
function CompanyName_func() {
document.getElementById('CompanyName_holder').innerHTML = CompanyName.value;
}

//position the javascript on page

function myInit()
{
var CompanyName_insert = document.getElementById('end_of_div');
CompanyName_insert.parentNode.insertBefore(CompanyName, CompanyName_insert);
}
window.onload = myInit;

[gnp]

Hi,

you should include the CompanyName input inside of another element that would hold the caption as well..

so

//Create the Element that will hold both Caption and Input
var Pair = document.createElement('span');
Pair.innerHTML = 'This is the caption : ';

//Create the Company Name text field
var CompanyName = document.createElement('input');
CompanyName.type = 'text';
CompanyName.id = 'CompanyName';
CompanyName.name = 'CompanyName';
CompanyName.style.width = '200px';
CompanyName.onkeyup = CompanyName_func;

//Add the INPUT after the caption
Pair.appendChild(CompanyName);

//put values into company name div tag
function CompanyName_func() {
document.getElementById('CompanyName_holder').innerHTML = CompanyName.value;
}

//position the javascript on page

function myInit()
{
var CompanyName_insert = document.getElementById('end_of_div');
CompanyName_insert.parentNode.insertBefore(Pair, CompanyName_insert);
}
window.onload = myInit;


Note that the myInit function now adds the Pair element instead of the CompanyName, as the pair include the companyname...

regards

[dean5000v]

hey thanks perfect solution whoever with this the span tag closes after the text box is there anyway i can get it to close the element just after the text and before the text feild ?

[gnp]

//Create the Element that will hold the Caption
var Span = document.createElement('span');
Span.innerHTML = 'This is the caption : ';

//Create the Company Name text field
var CompanyName = document.createElement('input');
CompanyName.type = 'text';
CompanyName.id = 'CompanyName';
CompanyName.name = 'CompanyName';
CompanyName.style.width = '200px';
CompanyName.onkeyup = CompanyName_func;

//put values into company name div tag
function CompanyName_func() {
document.getElementById('CompanyName_holder').innerHTML = CompanyName.value;
}

//position the javascript on page

function myInit()
{
var Insert_Point = document.getElementById('end_of_div');
Insert_Point.parentNode.insertBefore(Span, Insert_Point); // add the Span where we want it
Insert_Point.parentNode.insertBefore(CompanyName, Insert_Point); // add the CompanyName where we want it
}
window.onload = myInit;


Here you go ..

the changes were trivial.
You should try to understand the concept so you can expand on it ;)