Как генерировать разметку с помощью js?

Нужно сгенерировать разметку таблицы

table class="tableO">
        <tbody>
            <tr>
                <td align="center">
                    Matrix
                    <table class="tableM">
                        <tbody>
                            <tr>
                                <td class="TblCl"><input type="text" name="m12" id="00" placeholder="0" autocomplete="off"></td>
                                <td class="TblCl"><input type="text" name="m13" id="01" placeholder="0" autocomplete="off"></td>
                                <td class="TblCl"><input type="text" name="m11" id="02" placeholder="0" autocomplete="off"></td>
                            </tr>
                            <tr>
                                <td class="TblCl"><input type="text" name="m21" id="10" placeholder="0" autocomplete="off"></td>
                                <td class="TblCl"><input type="text" name="m22" id="11" placeholder="0" autocomplete="off"></td>
                                <td class="TblCl"><input type="text" name="m23" id="12" placeholder="0" autocomplete="off"></td>
                            </tr>
                            <tr>
                                <td class="TblCl"><input type="text" name="m31" id="20" placeholder="0" autocomplete="off"></td>
                                <td class="TblCl"><input type="text" name="m32" id="21" placeholder="0" autocomplete="off"></td>
                                <td class="TblCl"><input type="text" name="m33" id="22" placeholder="0" autocomplete="off"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    Answers
                    <table class="tableA">
                        <tbody>
                            <tr>
                                <td><input type="text" name="r1" id="30" placeholder="0" autocomplete="off"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="r2" id="31" placeholder="0" autocomplete="off"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="r3" id="32" placeholder="0" autocomplete="off"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

Пользователь в шаблоне должен ввести в инпут число, js должен забирать это значение и генерировать разметку