Вставка данных с помощью Ajax в DOM

Когда я нажимаю на кнопку, то ожидаю увидеть текстовый абзац в котором будет расположен текст из JSON. Но что-то не так и в консоли видна ошибка. Задача простая, всего лишь при клике на кнопку сделать запрос на сервер Node.js и вывести в браузер с помощью Ajax текст - и это не получается реализовать. А вот если представить, что будет много данных в хранится JSON, например у текста ещё есть заголовок, дата создания и пр., то вообще непонятно как это "легко" обработать и красиво записать в DOM в нужное место.

    <script>
    var btn = document.getElementById("button_more");
    btn.addEventListener("click", xhr, false);
    function xhr() {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            if (xhr.status === 200) {
                responseObject = JSON.parse(xhr.responseText);
            } else {
                alert("Ошибка сервера, получен ответ отличный от '200'");
            }
            var position = document.getElementById("text"); //получил доступ к элементу в котором будет располагаться распарсинные данные от сервера
            var newEl = document.createElement("p"); //создал элемент в который будут записываться данные с сервера
            position.appendChild(newEl); //вывел новый узел в качестве дочернего(пока пустой)
            newEl.importNode(responseObject);// а теперь записал в созданный элемент данные с сервера
        };
        xhr.open("GET", "test-data.json", true);
        xhr.send(null);
    }
</script>

файл с данными из .json

    {
    "text": "Начало новостного текста........."
}

сама ошибка