При вставке текстового значения, содержащего кавычки или апостроф, оно усекается

При вставке текстового значения, содержащего кавычки или апостроф, с помощью jQuery в поле value оно усекается на этом символе. Я знаю об одинарных и двойных кавычках. Текст может быть любым. В базу данных сохраняется нормально, в переменной все в порядке, но при выводе в html - путаница. Как избежать этой ошибки?

Один из вариантов:

$('<div>', {
            class: 'menu-block',
            html: `<div class="menu-button">
                        <button onclick="return itemField(this)" type="button" class="btn btn-warning">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button onclick="return deleteField(this)" type="button" class="btn btn-danger"">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input type="text" class="form-control" data="label" value='${label}' disabled />
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" data="datal" value='${datal}' disabled />
                        </div>
                    </div>`
        }).appendTo('#div-extra');
<<<Понимая, что это не единичный случай, я пошел другим путем. Я заменил

на input (или span). Далее в коде мне пришлось заменить несколько строк, теперь все работает как надо.div 

$('<div>', {
            class: 'menu-block',
            html: `<div class="menu-button">
                    <button onclick="return itemField(this)" type="button" class="btn btn-warning">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button onclick="return deleteField(this)" type="button" class="btn btn-danger"">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col">
                        <span class="form-control" data="label" style="background-color: var(--bs-gray-200);">${label}</span>
                    </div>
                    <div class="col">
                        <span class="form-control" data="datal" style="background-color: var(--bs-gray-200);">${datal}</span>
                    </div>
                </div>`
        }).appendTo("#div-extra");
Вернуться на верх