Подключение xml с помощью js к html

перепробовала кучу всего, не понимаю в чем проблема и почему данные не отображаются на странице index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример загрузки XML с помощью JavaScript</title>
</head>
<body>
    <h1>Пример загрузки XML с помощью JavaScript</h1>
    <div id="xmlData"></div>

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

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <data>Hello, XML!</data>
    <image>Screenshot_1.png</image> <!-- Замените на путь к вашему изображению -->
</root>

script.js

window.addEventListener("DOMContentLoaded", function() {
    var xmlData = document.getElementById("xmlData");
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                var xmlDoc = xhr.responseXML;
                var data = xmlDoc.getElementsByTagName("data")[0].textContent;
                var imageUrl = xmlDoc.getElementsByTagName("image")[0].textContent;

                xmlData.innerHTML = data;

                var imgElement = document.createElement("img");
                imgElement.setAttribute("src", imageUrl);
                imgElement.setAttribute("alt", "Описание изображения");
                xmlData.appendChild(imgElement);
            } else {
                console.error("Ошибка загрузки XML файла:", xhr.status);
            }
        }`введите сюда код`
    };
    xhr.open("GET", "data.xml");
    xhr.send();
});

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