I am also using socket.io. There is an HTML table, and when a user clicks a button, my code is supposed to replace that table with a new one, however it gives the error message in the title.

Here is my code:
HTML:

<table>
                </tbody>
                    <tr>
                        <td class="1"></td>
                        <td class="2"></td>
                        <td class="3"></td>
                    </tr>
                    <tr>
                        <td class="4"></td>
                        <td class="5"></td>
                        <td class="6"></td>
                    </tr>
                    <tr>
                        <td class="7"></td>
                        <td class="8"></td>
                        <td class="9"></td>
                </tr>
                </tbody>
            </table>

JQuery script:

socket.on('resetGranted', function() {
        $('table').replaceWith('<table>    //says error is here
                </tbody>
                    <tr>
                        <td class="1"></td>
                        <td class="2"></td>
                        <td class="3"></td>
                    </tr>
                    <tr>
                        <td class="4"></td>
                        <td class="5"></td>
                        <td class="6"></td>
                    </tr>
                    <tr>
                        <td class="7"></td>
                        <td class="8"></td>
                        <td class="9"></td>
                </tr>
                </tbody>
            </table>');
    })

How do I fix this?

I am also using socket.io. There is an HTML table, and when a user clicks a button, my code is supposed to replace that table with a new one, however it gives the error message in the title.

Here is my code:
HTML:

<table>
                </tbody>
                    <tr>
                        <td class="1"></td>
                        <td class="2"></td>
                        <td class="3"></td>
                    </tr>
                    <tr>
                        <td class="4"></td>
                        <td class="5"></td>
                        <td class="6"></td>
                    </tr>
                    <tr>
                        <td class="7"></td>
                        <td class="8"></td>
                        <td class="9"></td>
                </tr>
                </tbody>
            </table>

JQuery script:

socket.on('resetGranted', function() {
        $('table').replaceWith('<table>    //says error is here
                </tbody>
                    <tr>
                        <td class="1"></td>
                        <td class="2"></td>
                        <td class="3"></td>
                    </tr>
                    <tr>
                        <td class="4"></td>
                        <td class="5"></td>
                        <td class="6"></td>
                    </tr>
                    <tr>
                        <td class="7"></td>
                        <td class="8"></td>
                        <td class="9"></td>
                </tr>
                </tbody>
            </table>');
    })

How do I fix this?

• javascript
• jquery
• html
• socket.io

• Try using .html() instead of .replaceWith() – Del Commented Mar 16, 2018 at 7:34
• Don't think this is the cause of your error but note that what should be the opening tbody tag in your javascript is actually a closing tag, so you probably want to fix that. – cjl750 Commented Mar 16, 2018 at 7:34

2 Answers 2

Use backtick ` for multiline string

console.log(`
    multi
    line
    string
    here
`);

socket.on('resetGranted', function() {
var htmlContent='<table>
            </tbody>
                <tr>
                    <td class="1"></td>
                    <td class="2"></td>
                    <td class="3"></td>
                </tr>
                <tr>
                    <td class="4"></td>
                    <td class="5"></td>
                    <td class="6"></td>
                </tr>
                <tr>
                    <td class="7"></td>
                    <td class="8"></td>
                    <td class="9"></td>
            </tr>
            </tbody>
        </table>';
        $('table').replaceWith(htmlContent);
    })