Исчезающие элементы DOM при манипуляции с JavaScript

Question

У меня есть XML файл, назовем его примером. xml, и вот содержимое:

<?xml version='1.0' encoding='utf-8'?>
<document id="id1">
  <elemone id="id2"></elemone>
  <elemtwo id="id3"></elemtwo>
</document>

Я извлекаю это, используя интерфейс XmlHTTPRequest в JavaScript, и Dev Инструменты проверки запроса соответствуют содержимому.

Затем я передаю атрибут responseXML функции обработки.

var xhr = new XMLHttpRequest();

xhr.addEventListener("load", function(e) {

var resp = e.target
if (resp.status == 200 &&
        resp.responseXML != null && resp.responseXML.getElementsByTagName('document')) { // should have [0] at the end
                    xhrProcess(resp.responseXML);       
    }
}, false);
xhr.open("GET", "http://localhost:8080/example.xml");
xhr.send();
// EDIT START
xhr.open("GET", "http://localhost:8080/example.xml");
xhr.send();
// EDIT END

При разборе происходит странная вещь.

var xhrProcess = function(data) {
    var DOMSubElement = null;
    // EDIT START
    var DOMOtherElement = document.body;
    // EDIT END
    // 
    switch (data.firstElementChild.tagName) {
    // ...
    case 'document':
        DOMSubElement = data.firstElementChild.getElementsByTagName('elemone')[0];
    //////////////////////
    // EDIT START
    // 
    DOMOtherElement.appendChild(DOMSubElement);
    //
    // forgot to mention; apparently, that's the culprit, in
    // combination with wrong handling of DOM Events
    //////////////////////
    break;
    }
    default:
        break;
}

Однако, , если есть совпадение , я получаю undefined и при проверке DOM я вижу, что элемент (<elemone>) отсутствует.

Вот результаты проверки объема в Firefox 75.0 Dev Tools:

data: XMLDocument
​​...       
childElementCount: 1    ​​
childNodes: NodeList(1)​​​
    0: document#id1
    ...  
    childElementCount: 1    ​​​​
    childNodes: NodeList(4)   ​​​​​
        0: #text​​​​​
        1: #text​​​​​
        2: elemtwo#id3
        3: #text    ​​​​​
        length: 4

Когда я добавляю опечатку, скажем, .getElementsByTagName('elemoneeee');, <elemone> возвращается.

data: XMLDocument​​
...
​​childElementCount: 1​​
childNodes: NodeList(1)​​​
    0: document#id1​​​​
    childElementCount: 2​​​​
    childNodes: NodeList(5)​​​​​
         0: #text​​​​​
         1: elemone#id2
         2: #text​​​​​
         3: elemtwo#id3
         4: #text​​​​​
         length: 5

Я тестирую его на Firefox 75,0

Answer 1

Спасибо @ Andreas :

.appendChild () удаляет элемент, откуда бы он ни появился. Если это не ваше намерение, то клонируйте элемент, прежде чем добавлять его куда-либо еще - Андреас