Красиво добавляйте элементы HTML в DOM с помощью JQuery

Да, два варианта:

1. Литералы шаблона

2. JSX

Литералы шаблона

В современном JavaScript вы можете использовать шаблонные литералы, а не строковые литералы, и они могут включать заполнители с выражениями JavaScript в них:

let counter = 0;

$(`<table class = "main">
    <tbody>
        <tr>
            <td>Cell ${counter++}</td>
            <td>Cell ${counter++}</td>
        </tr>
        <tr>
            <td>Cell ${counter++}</td>
            <td>Cell ${counter++}</td>
        </tr>
    </tbody>
</table>`).appendTo(document.body);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Определенно есть некоторая неловкость, но это намного лучше, чем строковые литералы.

Подробнее о шаблонных литералах на MDN.

JSX

JSX не ограничивается React. Он имеет свой собственная спецификация и несколько реализаций, таких как jsx-transform.

Например, вот простая оболочка Node.js, которая использует ее для преобразования файла:

var jsx = require('jsx-transform');

console.info(jsx.fromFile("input.jsx", {
  factory: 'be'
}));

Если бы input.jsx были:

let counter = 0;
let table =
    <table class = "main">
        <tbody>
            <tr>
                <td>Cell {counter++}</td>
                <td>Cell {counter++}</td>
            </tr>
            <tr>
                <td>Cell {counter++}</td>
                <td>Cell {counter++}</td>
            </tr>
        </tbody>
    </table>;
table.appendTo(document.body);

(Обратите внимание, что это class = "main", а не className = "main". Использование className вместо этого - вещь React, чтобы избежать проблемы, которая не была проблемой с момента выхода ES5 в 2009 году.)

Результатом будет:

let counter = 0;
let table =
    be('table', {class: "main"}, [
        be('tbody', null, [
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ]),
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ])
        ])
    ]);
table.appendTo(document.body);

Обратите внимание, как JSX-выражения были преобразованы в вызовы фабричной функции (be в этом примере; фабричная функция React - React.createElement). Все, что вам нужно сделать, это предоставить функцию be и интегрировать преобразователь в вашу цепочку сборки (jsx-transform поставляется предварительно запеченным с возможностью подключения к Browserify).

Ваш be, использующий jQuery, может выглядеть примерно так:

function be(tagName, attributes, children) {
    const result = $("<" + tagName + "/>");
    if (attributes) {
        result.attr(attributes);
    }
    if (children) {
        if (Array.isArray(children)) {
            for (const child of children) {
                result.append(child);
            }
        } else {
            result.append(child);
        }
    }
    return result;
}

Живой пример функции be с использованием преобразованного результата:

let counter = 0;
let table =
    be('table', {class: "main"}, [
        be('tbody', null, [
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ]),
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ])
        ])
    ]);
table.appendTo(document.body);

function be(tagName, attributes, children) {
    const result = $("<" + tagName + "/>");
    if (attributes) {
        result.attr(attributes);
    }
    if (children) {
        if (Array.isArray(children)) {
            for (const child of children) {
                result.append(child);
            }
        } else {
            result.append(child);
        }
    }
    return result;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Удивительно, но все действительно так просто.