Добавленные запросы ajax прерывает другие уже добавленные запросы ajax (обычный js)

Question

У меня есть этот сценарий, который я сделал, я не уверен, как я могу это сделать. Я хочу добавить ответ на запрос ajax на страницу, не обновляя его другими словами. В x.php есть видео с iframe на YouTube, и я хочу иметь возможность просматривать одно из видео iframe

, пока я нажимаю кнопку, чтобы добавить еще запрос ajax из x.php. Этот скрипт добавляет, но прерывает другие уже добавленные div-запросы ajax.

Мой код

test.php

<script>

document.addEventListener('DOMContentLoaded', function(){

document.querySelector('#executeAjax').addEventListener('click', sendAjax);

function sendAjax(){
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
document.querySelector('#ajax').innerHTML += xhr.responseText;

}
}
xhr.open('POST','x.php');
xhr.send();
}

});

</script>

<button id='executeAjax'>Execute</button>
<div id='ajax'></div>

x.php

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

Answer 1

Это должно сработать

<script>
document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#executeAjax').addEventListener('click', function(event){
        event.preventDefault();
        var xhr= new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                document.querySelector('#ajax').insertAdjacentHTML( 'beforeend', xhr.responseText);
            }
        }
        xhr.open('POST','x.php');
        xhr.send();
    });
});
</script>