Создание элемента внутри класса, который является частью включенного html, используя javascript * no jquery - PullRequest
Новая
       50

Создание элемента внутри класса, который является частью включенного html, используя javascript * no jquery

1 голос
/ 29 марта 2020

Я пытаюсь загрузить код HTML через XMLHttpRequest в мой индекс. html. Но я заблокирован, добавив полученный код HTML к другому тегу в моем индексе. html.

Это мой индекс. html с XMLHttprequest: 

<header id="header"></header>

<script>
    if (document.body.contains(document.getElementById('header'))) {
        var reqHeader = new XMLHttpRequest();
        reqHeader.onload = function () {
            document.getElementById('header').appendChild(this.responseText);
        }
        reqHeader.open('get', 'header.html', true);
        reqHeader.send();
    }
</script>

А это содержимое моего заголовка. html file: 

<div id="headerWrapper">
    <ul>
        <li id="foo">1</li>
    </ul>
</div>

1 Ответ

2 голосов
/ 30 марта 2020

Содержимое, возвращаемое XMLHttpRequest, является строкой. Вы можете проанализировать эту строку, используя javascript XMLParser , который вернет вам элемент DOM, к которому вы можете получить доступ с помощью обычного javascript синтаксиса доступа к DOM.

Итак, в вашем XMLHttpRequest используйте следующий код 

const parser = new DOMParser().parseFromString(htmlString, 'text/html');
document.getElementById('header').appendChild(parser.querySelector('#headerWrapper'));

Упрощенный пример без XMLHttpRequest из-за перекрестной политики происхождения: 

if (document.body.contains(document.getElementById('header'))) {
    var htmlString = '<div id="headerWrapper"><ul><li id="foo">1</li><li id="bar">2</li></ul></div>';
    const parser = new DOMParser().parseFromString(htmlString, 'text/html');
    document.getElementById('header').appendChild(parser.querySelector('#headerWrapper'));
}

document.getElementById('foo').classList.add('test');
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <header id="header"></header>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...