insert html code to createelement("td")

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Amzul
    New Member
    • Oct 2007
    • 130
    #1

    insert html code to createelement("td")

    hello all
    i did this table useing
    createElement() ;
    i am trying to insert html code to the <td> to put img and links
    but so far no luck
    any one have an idea on how it shouled b done?
    the second qustion is how i can desing the hieght of the td
    here is snippet

    Code:
    var cell = document.createElement("td");			
var cellText = document.createTextNode(only text ids display, no innerHTML?); 
cell.setAttribute("aligen","center");        //dosent work 		
cell.appendChild(cellText);
row.appendChild(cell);
    also my last qustion is how can i see the code that been generate?
    i see that the table is there but i cant see the html codeof it soi cant copy paste it

    thanks guys
    Tags: None
    • Ferris
      New Member
      • Oct 2007
      • 101
      #2
      Hi

      I tested your code,and I think the problem is you missed quote mark in your code,and you spell wrong.

      change
      var cellText = document.create TextNode(only text ids display, no innerHTML?);
      into
      var cellText = document.create TextNode("only text ids display, no innerHTML?");

      change
      cell.setAttribu te("aligen","ce nter");
      into
      cell.setAttribu te("align","cen ter");

      then,you'll see the text in your table.

      here is my test code:
      [HTML]
      <html>
      <head>
      <title>Untitl ed Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      </head>
      <body>
      <table width="50%" border="1">
      <tr id="tr1">

      </tr>
      </table>
      </body>
      </html>

      <script language="javas cript">
      var row = document.getEle mentById("tr1") ;
      var cell = document.create Element("td");
      var cellText = document.create TextNode("only text ids display, no innerHTML?");
      cell.setAttribu te("align","cen ter"); //now works
      cell.appendChil d(cellText);
      row.appendChild (cell);
      </script>

      [/HTML]


      for your 2th question:

      since your table is created by javascript(DOM) ,you table is a part of javascript code in your HTML code. you can't find the HTML code after the table is created. You can using DOM Inspector in Firefox,or IE Develop Toolbar in IE to check your table was created successfully,or not.



      hope it helps.

        Comment

        • Amzul
          New Member
          • Oct 2007
          • 130
          #3
          Originally posted by Ferris
          Hi

          I tested your code,and I think the problem is you missed quote mark in your code,and you spell wrong.

          change
          var cellText = document.create TextNode(only text ids display, no innerHTML?);
          into
          var cellText = document.create TextNode("only text ids display, no innerHTML?");

          change
          cell.setAttribu te("aligen","ce nter");
          into
          cell.setAttribu te("align","cen ter");

          then,you'll see the text in your table.

          here is my test code:
          [HTML]
          <html>
          <head>
          <title>Untitl ed Document</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          </head>
          <body>
          <table width="50%" border="1">
          <tr id="tr1">

          </tr>
          </table>
          </body>
          </html>

          <script language="javas cript">
          var row = document.getEle mentById("tr1") ;
          var cell = document.create Element("td");
          var cellText = document.create TextNode("only text ids display, no innerHTML?");
          cell.setAttribu te("align","cen ter"); //now works
          cell.appendChil d(cellText);
          row.appendChild (cell);
          </script>

          [/HTML]


          for your 2th question:

          since your table is created by javascript(DOM) ,you table is a part of javascript code in your HTML code. you can't find the HTML code after the table is created. You can using DOM Inspector in Firefox,or IE Develop Toolbar in IE to check your table was created successfully,or not.



          hope it helps.
          thanks man, you were right about my bad spelling :/

          but for the first qustion i think i havent explain myself good.
          i know i need to put ""in the () but i want to use html code
          like that :

          Code:
          var code="<a href=\"www.thescripts.com\">the scipts</a>"
var cellText = document.createTextNode(code); // i want to put the link (code) in the <td>
          about the 3 Qustion,
          is there a way to take the all code and insert it to a var and not just for <tag>
          i need to display the code as well not just the table

          hope u can understand me

            Comment

            • Ferris
              New Member
              • Oct 2007
              • 101
              #4
              Hi:

              Oh,I see. you want to insert HTML code into <td> HTML is not a textNode,so you can't insert it using createTextNode. but , you can do it like this:

              [CODE=JAVASCRIPT]
              var cell = document.create Element("td");
              var code = "<a href=\"www.thes cripts.com\">th e scipts</a>";
              cell.setAttribu te("align","cen ter");
              cell.innerHTML = code;
              row.appendChild (cell);
              [/CODE]


              for your 3rd question,of cause you can insert all your code to a var. look at these code:

              [CODE=JAVASCRIPT]
              var code= "<a href=\"http://www.thescripts. com\">the scipts</a>";
              document.write( code);
              [/CODE]

              also,you can use innerHTML to insert your code.


              [CODE=JAVASCRIPT]
              var code= "<a href=\"http://www.thescripts. com\">the scipts</a>";
              document.getEle mentsByTagName( "body")[0].innerHTML = code;
              [/CODE]

              am I clear?

              hope it helps.

                Comment

                • Amzul
                  New Member
                  • Oct 2007
                  • 130
                  #5
                  Originally posted by Ferris
                  Hi:

                  Oh,I see. you want to insert HTML code into <td> HTML is not a textNode,so you can't insert it using createTextNode. but , you can do it like this:

                  [CODE=JAVASCRIPT]
                  var cell = document.create Element("td");
                  var code = "<a href=\"www.thes cripts.com\">th e scipts</a>";
                  cell.setAttribu te("align","cen ter");
                  cell.innerHTML = code;
                  row.appendChild (cell);
                  [/CODE]


                  for your 3rd question,of cause you can insert all your code to a var. look at these code:

                  [CODE=JAVASCRIPT]
                  var code= "<a href=\"http://www.thescripts. com\">the scipts</a>";
                  document.write( code);
                  [/CODE]

                  also,you can use innerHTML to insert your code.


                  [CODE=JAVASCRIPT]
                  var code= "<a href=\"http://www.thescripts. com\">the scipts</a>";
                  document.getEle mentsByTagName( "body")[0].innerHTML = code;
                  [/CODE]

                  am I clear?

                  hope it helps.
                  thanks. that help me alot
                  i am 90% from my goal.
                  but agian please explian how to insret the code that DOM generated to a var...
                  i not only need to show the table that DOM creted i alsoneed to show the code of it
                  is that posible?
                  i know i can do it all in inerrHTML but its not elegent and i woued have to write itall agian :\

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by Amzul
                      i not only need to show the table that DOM creted i alsoneed to show the code of it
                      You mean display it on the screen?

                        Comment

                        • Amzul
                          New Member
                          • Oct 2007
                          • 130
                          #7
                          Originally posted by acoder
                          You mean display it on the screen?
                          i ment that i need to display the code that the DOM create

                          i mange to do so like this

                          Code:
                          //asumming that tblis the highr level of the tabl (father)
generated_code=tbl.innerHTML;
                          now i can put it anyware i want (in a <pre> <div> etc...)

                            Comment

                            Previous template Next
                            Working...