Почему консоль выдает ошибку Unexpected token '<'. JavaScript

Question

Только учусь писать на JavaScript. Делаю модальное окно. Прописав в функцию targetElement.insertAdjacentHTML(position, text);, консоль выдает ошибку Uncaught SyntaxError: Unexpected token '<'. В своем коде я писал text без ковычек, выдавала ошибку которую я указал сверху. Беру ее в ковычки, выдает ошибку Uncaught SyntaxError: Invalid or unexpected token. В документации как раз писали в ковычках. Может проблема в другом?

function _createModal(options) {
    const modal = document.createElement('div')
    modal.classList.add('vmodal');
    modal.insertAdjacentHTML('afterbegin', 
            <div class="modal-overlay">
                <div class="modal-window">
                    <div class="modal-header">
                        <span class="modal-title">Modal title</span>
                        <span class="modal-close">&times;</span>    
                    </div>

                    <div class="modal-body">
                        <p class="modal-body_desc">Lorem ipsum dolor sit amet.</p>
                        <p class="modal-body_desc">Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="modal-footer">
                        <button class="modal-footer_btn">Good</button>
                        <button class="modal-footer_btn">Cancel</button>
                    </div>
                </div>
            </div>
    );

        return modal

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>

    




    
    <script src="plugins/modal.js"></script>
    
</body>
</html>

Answer 1

Если вы не подключаете никаких библиотек, которые поддерживают парсинг HTML внутри JS, тогда HTML нужно писать в кавычках. Но обычные двойные или одинарные кавычки в JS не разрешают внутри переводы строк. Попробуйте облечь HTML в обратные косые кавычки:

function _createModal(options) {
    const modal = document.createElement('div')
    modal.classList.add('vmodal');
    modal.insertAdjacentHTML('afterbegin',
            `<div class="modal-overlay">
                <div class="modal-window">
                    <div class="modal-header">
                        <span class="modal-title">Modal title</span>
                        <span class="modal-close">&times;</span>    
                    </div>

                    <div class="modal-body">
                        <p class="modal-body_desc">Lorem ipsum dolor sit amet.</p>
                        <p class="modal-body_desc">Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="modal-footer">
                        <button class="modal-footer_btn">Good</button>
                        <button class="modal-footer_btn">Cancel</button>
                    </div>
                </div>
            </div>`
    );

        return modal

}

БЛОГ НА HUSL

Почему консоль выдает ошибку Unexpected token '<'. JavaScript

Ответы (1 шт):