JavaScript createElement qn

Question

Why doesn't this piece of code work? When I used the commented part instead of the table it works... Use table why cannot work?

<html>
    <head>
        <script type="text/javascript">
        function addLine() {
            var p = document.createElement('p');
            p.innerHTML = "hello";
            document.getElementById("addline").appendChild(p);
        }

        </script>
    </head>
    <body>
    <!--
    <input type="submit" value="New Line" onClick="addLine()"/>
    <div id="addline"></div>
    -->
        <table>
            <tbody>
                <tr>inside a table</tr>
            </tbody>
            <tfoot>
                <tr><input type="submit" value="New Task" onClick="addLine()"/></tr>
                <tr id="addline"></tr>
            </tfoot>                        
        </table>
    </body>
</html>

Don't ask two questiosn in the same question. Ask them in separate questions. — T.J. Crowder, Feb 24 '10 at 07:45
Cos they are considered minor issues, so i thought it would be better to ask them together.... — yeeen, Feb 24 '10 at 07:55
Came back and see you haven't (yet) asked the follow-up, so I'll just post the answer here: Use `htmlFor` instead (`a.htmlFor = 'name';`): http://blog.studiosedition.com/2009/11/label-for-attribute/ (And it would be a duplicate question anyway: http://stackoverflow.com/questions/1232579/setting-for-attribute-of-a-label-element-with-object-oriented-method ) — T.J. Crowder, Feb 24 '10 at 08:16

score 2 · Answer 1 · answered Feb 24 '10 at 07:44

2

You are trying to append a <p> element to <tr> element, but only <td> and <th> elements are allowed there.

answered Feb 24 '10 at 07:44

Quentin

914,110
126
1,211
1,335

Not if he uncomments the commented-out part, as he said he does when it stops working. Then it's indeterminate whether he's trying to append to a `div` or a `tr`. – T.J. Crowder Feb 24 '10 at 07:52
No, he said when he uses that **instead** of the table it **does** work (since a p may be a child of a div). – Quentin Feb 24 '10 at 07:53
Yeah, it's right there in B&W. Need another cup of coffee. :-( – T.J. Crowder Feb 24 '10 at 07:55

score 1 · Answer 2 · answered Feb 24 '10 at 07:45

1

you can only append into <td>...

Instead of:

<tr id="addline"></tr>

Use:

<tr><td id="addline"></td></tr>

For the second question, "for" is a reserved Keyword in many languages. You can't use it, and if you find a way to do so [setAttribute or something like that, not that I've tested that, i'm just throwing a wild guess] its bad programming practice.

Maybe you can use variable name "isFor" or "usage" =/ idk

answered Feb 24 '10 at 07:45

Warty

7,237
1
31
49

It's not bad practice to use `a.setAttribute('for')`. At that point he's specifying the name of an attribute, which has nothing to do with JavaScript's reserved keywords (and which he *has* to do if he wants to set that attribute on the element). – T.J. Crowder Feb 24 '10 at 07:57
why works but don't? – yeeen Feb 24 '10 at 07:58
Then why 'label1.for = "aaa"' can't be used if it is not the case of reserve word? – yeeen Feb 24 '10 at 08:00
@yeeen — for the reasons I described in my answer, and because it *is* a reserved word, respectively. – Quentin Feb 24 '10 at 08:01
ok, got it... cos when i read urs i don't understand, when i saw itz's, i forgot abt urs... sorry for the trouble.. – yeeen Feb 24 '10 at 08:05
@yeeen : Basically, in HTML "tr" starts a table row. "td" starts a table cell. When you have a table, you're not writing into a row, you're writing into a cell. That is the logic you should follow. Hope that helps! – Warty Feb 24 '10 at 08:19
Re my comment above: It's not bad practice, but it doesn't work on IE6 or IE7. You were on the right track, it's `htmlFor`: `a.htmlFor = 'name';`. So that goes on the list along with `cssFloat` and `className`. :-) – T.J. Crowder Feb 24 '10 at 08:37

JavaScript createElement qn

2 Answers2