problem with closing tags for DOM, Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • basm101
    New Member
    • Sep 2007
    • 12
    #1

    problem with closing tags for DOM, Javascript

    Hello,

    I need to know how to create closing tag elements when using DOM to add in form elements to a page.

    Here is the code...the <div> I am adding to the page is called dropDownList (for legacy reasons...it isnt really a drop down list!).

    I need to put in closing td tags...
    I tried this:
    [CODE=javascript] var tdClose = document.create Element(/td);[/CODE]
    and this:
    [CODE=javascript] var td = document.create Element('/td');[/CODE]

    but when I try and add them e.g.
    [CODE=javascript]document.getEle mentById('dropD ownList').appen dChild(tdClose) ;[/CODE]

    I get errors.

    Help !


    [CODE=javascript]function addRaresToList( number){
    var species = document.getEle mentById('addSp ecies').value;
    alert ("ADD " + species + " to " + number);

    var td = document.create Element(td);

    // add hidden index
    var i = document.create Element('input' );
    i.type = 'hidden';
    i.name = 'observation.in dex';
    i.value = 'number';
    document.getEle mentById('dropD ownList').appen dChild(i);

    // add hidden comment
    var i = document.create Element('input' );
    i.type = 'hidden';
    i.name = 'observation.nu mber.comment';
    i.id = 'observation.nu mber.comment';
    document.getEle mentById('dropD ownList').appen dChild(i);

    // add hidden breeding code
    var i = document.create Element('input' );
    i.type = 'hidden';
    i.name = 'observation.nu mber.breedingCo de';
    i.id = 'observation.nu mber.breedingCo de';
    document.getEle mentById('dropD ownList').appen dChild(i);

    // add species name
    document.getEle mentById('dropD ownList').appen dChild(td);
    var txt = document.create TextNode(specie s);
    document.getEle mentById('dropD ownList').appen dChild(txt);


    // add checkbox
    document.getEle mentById('dropD ownList').appen dChild(td);
    var i = document.create Element('input' );
    i.type = 'checkbox';
    i.name = 'observation.nu mber.species';
    var d = document.getEle mentById( 'dropDownList' );
    d.appendChild( i );

    // add textbox
    document.getEle mentById('dropD ownList').appen dChild(td);
    var i = document.create Element('input' );
    i.type = 'text';
    i.name = 'observation.nu mber.speciesCod e';
    i.size = '7';
    i.maxlength = '7';
    var d = document.getEle mentById( 'dropDownList' );
    d.appendChild( i );

    }
    </script>[/CODE]
    Last edited by acoder; Sep 28 '07, 02:33 PM. Reason: Added language to code tag
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      You don't need a closing tag. The object is created and you can append it to the row and append elements/items to it.

        Comment

        • basm101
          New Member
          • Sep 2007
          • 12
          #3
          Originally posted by acoder
          You don't need a closing tag. The object is created and you can append it to the row and append elements/items to it.
          I am still a bit confused..

          Do I need to make a table in my javascript ?

          At the moment all the elements I am adding in are going into just one cell of a table (I am adding my <div> to an existing table). I want each element (text, checkbox, input text) to go into a separate cell.

          Surely to do that I need to put a </td> in somewhere...and I can't do this:

          [CODE=javascript]var tdClose= document.create Element('/td');
          document.getEle mentById('dropD ownList').appen dChild(tdClose) ;[/CODE]

          by 'the object is created' do you mean the var d = document.getEle mentById( 'dropDownList' ); object ? Sorry to be so dim, I am very new to this !

          thanks for your input
          Last edited by gits; Sep 28 '07, 04:08 PM. Reason: fix code tags

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388
              #4
              hi ...

              nope ... when using createElement it creates a valid node for you. when you append another node to it, it will be a childNode of it ... so you don't need to create a closing tag. you are not creating tags! but nodes with this dom-method.

              kind regards

              ps: may be the following small graph is of help ... imagine a document as a tree:

              Code:
              html - root node (starts with <html> and ends with </html>)
  |_ head
  |_ body
        |_ div1
        |_ div2
              |_ whatever nodes ...

                Comment

                • epots9
                  Recognized Expert Top Contributor
                  • May 2007
                  • 1352
                  #5
                  Originally posted by gits
                  hi ...

                  nope ... when using createElement it creates a valid node for you. when you append another node to it, it will be a childNode of it ... so you don't need to create a closing tag. you are not creating tags! but nodes with this dom-method.

                  kind regards

                  ps: may be the following small graph is of help ... imagine a document as a tree:

                  Code:
                  html - root node (starts with <html> and ends with </html>
  |_ head
  |_ body
        |_ div1
        |_ div2
              |_ whatever nodes ...
                  Gits is right, i think you might have confused document.write and document.create Element.

                    Comment

                    Previous template Next
                    Working...