insert html

Discussion in 'JavaScript' started by dean5000v, Feb 23, 2009.

0
  1. #1
    //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;
     
    dean5000v, Feb 23, 2009 IP
  2. gnp

    gnp Peon

    Messages:
    137
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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;
    Code (javascript):
    Note that the myInit function now adds the Pair element instead of the CompanyName, as the pair include the companyname...

    regards
     
    gnp, Feb 23, 2009 IP
  3. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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 ?
     
    dean5000v, Feb 25, 2009 IP
  4. gnp

    gnp Peon

    Messages:
    137
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4 
    

//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;
    Code (javascript):
    Here you go ..

    the changes were trivial.
    You should try to understand the concept so you can expand on it ;)
     
    gnp, Feb 25, 2009 IP