Добавить элемент из XML в div, без jQuery

Question

РЕДАКТИРОВАТЬ: сделал заголовок более конкретным для решения проблемы дублирования вопроса.

У меня есть HTML-страница с button и div. Когда пользователь нажимает кнопку, функция запускает XMLHttpRequest, чтобы получить таблицу из файла XML. Таблица должна быть вставлена в div.

Запрос AJAX возвращает object Element моей переменной. Как я могу получить содержимое этой переменной (то есть <table><tr><td>... и т. Д. Из файла XML) для вставки в div?

Вот код JavaScript:

function table_loadContent() {

    var request;

    if (window.XMLHttpRequest) {

        request = new XMLHttpRequest();
        console.log("HTTPRequest");

    } else {

        request = new ActiveXObject("Microsoft.XMLHTTP");
        console.log("ActiveX");

    }

    request.open('GET', 'myXMLFile.xml');

    request.onreadystatechange = function() {

        if ((request.readyState === 4) && (request.status === 200)) {

            var newTable = request.responseXML.getElementsByTagName('table');
            document.getElementById('myDiv').appendChild(newTable);

        }

    }

    request.send();

}

Варианты, которые я пробовал, не работают:

document.getElementById("myDiv").innerHTML = myVar;
document.getElementById("myDiv").appendChild(myVar);
document.getElementById("myDiv").appendChild(myVar[0]);
То же, что и выше, но с использованием второй переменной для хранения версии .toString()
попытался объявить файл XML как XML и как HTML
var newTable = request.responseXML.getElementById('myTable') ;

javascript html ajax xml

1

JohnS 28 Фев 2017 в 23:07

Answer 1

Мы нашли решение:

Изменяя строки:

Var newTable = request. responseXML.getElementsByTagName ('table') document.getElementById ( ' myDiv ') < сильный > .appendChild ( Новая_таблица )

Чтобы :

Var newTable = request. responseText document.getElementById ('myDiv'). innerHTML = newTable

Это работает так, как мы хотели бы. (Редактировать разочарование: я не могу заставить его разбивать строки правильно)

0

JohnS 1 Мар 2017 в 15:33

Answer 2

В следующем коде:

var newTable = request.responseXML.documentElement.getElementsByTagName('table');

Переменная newTable является HTMLCollection, это это не элемент.

Если вы хотите добавить только первый элемент в коллекции, вы можете использовать:

document.getElementById('myDiv').appendChild(newTable[0]);

Если вы хотите добавить все узлы внутри коллекции, вам нужно выполнить итерацию в коллекции и добавить к div каждый элемент, содержащийся в ней:

var newTable = request.responseXML.documentElement.querySelectorAll('table');

var myDiv = document.getElementById('myDiv');

[].forEach.call(newTable, function (table) {

    myDiv.appendChild(table)

});

< STRONG> ПРИМЕЧАНИЕ :
1 - я использовал метод querySelectorAll, потому что это не-живая коллекция HTMLCollection и может использоваться для изменения DOM без изменения коллекции.
2 - Используйте свойство documentElement responseXML, чтобы убедиться, что вы выбираете основной узел документа.

0

Community 23 Май 2017 в 12:25

Добавить элемент из XML в div, без jQuery

2 ответа

Изменяя строки:

Чтобы :

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript