CODEWITHSUNDEEP
javascript
yeeen
yeeen

Reputation: 4945

JavaScript innerHTML

Why doesn't this work? innerHTML cannot take in something so complicated?

<html>
<head>
    <script type="text/javascript">
        function addTable() {
            var html = "<table><tr><td><label for="name">Name:</label></td><td><input type="text" id="name"></input></td></tr>"; +
                "<tr><td><label for="remarks">Remarks:</label></td><td><input type="text" id="remarks"></input></td></tr></table>";
            document.getElementById("addtable").innerHTML = html;
        }
    </script>


</head>
<body>
    <input type="submit" value="New Table" onClick="addTable()"/>
    <div id="addtable"></div>
</body>
</html>

Something less complicated like this works: 

var html = "<table><tr><td>123</td><td>456</td></tr></table>";

Upvotes: 0

Views: 2929

Answers (6)

remi bourgarel
remi bourgarel

Reputation: 9389

There is an error in your string , try this :

var html = "Name:"; + "Remarks:"; document.getElementById("addtable").innerHTML = html;

Upvotes: 0

Aoriste
Aoriste

Reputation: 163

You need to either escape double quotes or use single quotes within the string destined for that innerHTML.

Upvotes: 0

Dave Anderson
Dave Anderson

Reputation: 12274

Your string is delimited using double quotes and also uses them within the string. Switch to using single quotes within the string.

var html = "<table><tr><td><label for='name'>Name:</label></td><td><input type='text' id='name'></input></td></tr>"; +
"<tr><td><label for='remarks'>Remarks:</label></td><td><input type='text' id='remarks'></input></td></tr></table>";

Upvotes: 0

Ravi Vanapalli
Ravi Vanapalli

Reputation: 9942

instead of double quotes use single quotes as shown below:

var html = "<table><tr><td><label for='name'>Name:</label></td><td><input type='text' id='name'></input></td></tr>' + "<tr><td><label for='remarks'>Remarks:</label></td><td><input type='text' id='remarks'></input></td></tr></table>";

Enjoy coding!!

Upvotes: 0

Pekka
Pekka

Reputation: 449385

Your quoting is broken. You are using double quotes inside the string:

"<tr><td><label for="remarks">Remarks:</label></td><td><input ....

the Firefox error console should always be your first stop, errors like that are always logged there.

Upvotes: 0

Jimmy
Jimmy

Reputation: 37081

You need to either escape double quotes within the string you're assigning to the html variable, or just enclose the string with single quotes. Use a text editor with syntax highlighting and errors like that will jump out at you right away. You also have an extra semicolon in your assignment.

Upvotes: 4

Related Questions