When you insert a text value that contains quotation marks or an apostrophe, it is truncated

Question

When pasting a text value containing quotes or an apostrophe using jQuery into a value field, it is truncated at that character. I know about single and double quotes. The text can be anything. It is saved in the database normally, everything is in order in the variable, but when outputting to html - confusion. How to avoid this error?

One of the options:

$('<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');

Answer 1

Realizing that this is not an isolated case, I went the other way. I replaced the input in span (or div ). Further in the code, I had to replace several lines, now it works for me as it should.

$('<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");