javascript — Ajax заменяет родительский диапазон вместо создания дочернего

Я пытаюсь сделать что-то, что будет добавлять в список видео, три элемента за один раз одним нажатием кнопки, из MySQL. Вместо того, чтобы использовать jQuery, я решил попытаться стать умнее с AJAX.

Предполагается, что страница загружается, и загружаются три видео из базы данных, за которыми следует интервал. В диапазоне есть кнопка для активации сценария, сценарий для отправки запроса на получение 3 новых элементов и кнопка, а также значение 0. Вы нажимаете кнопку, и 3 новых элемента и новый диапазон, с новой кнопкой и скрипт, замените старую кнопку. Таким образом, для пользователя это выглядит как три элемента и кнопка, затем вы нажимаете кнопку, и появляется 6 элементов и одна и та же кнопка, затем 9 и кнопка и т. Д.

Вот код для страницы, которая загружается:

$newVideos = mysqli_query($con, "SELECT * FROM videos ORDER BY id DESC LIMIT 0,3");
while ($row = mysqli_fetch_array($newVideos)) {
echo '<br> The video "'.$row["title"].'"';
}
?><span id="newvideos">
<br><button onclick="newvideos(this.value)" value="0">More Videos</button><br>
<script>
function newvideos(x) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("newvideos").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","videosearch.php?morevideos="+x,true);
xmlhttp.send();
}
</script>
</span>

И это то, что этот скрипт отправляет запрос:

if (isset($_GET['morevideos'])) {
$morevideos = $_GET['morevideos'];
if (isset($morevideos)) {

$y = 3 + $morevideos;
$newVideos = mysqli_query($con, "SELECT * FROM videos ORDER BY id DESC LIMIT ".$y.",3");
//DESC is descending, last to first
//ASC is ascending, first to last

while ($row = mysqli_fetch_array($newVideos)) {
echo '<br> The video "'.$row["title"].'"';
}
echo '<span id="newvideos'.$y.'">';
echo '<br><button onclick="newvideos(this.value)" value="'.$y.'">More Videos</button><br>';
?>

<script>
function newvideos(x) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("newvideos<?php echo $y; ?>").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","videosearch.php?morevideos="+x,true);
xmlhttp.send();
}
</script>
</span>
<?php

}

}
?>

Таким образом, вместо этого происходит следующее: при нажатии первой кнопки первая кнопка заменяется 3 новыми видеоэлементами, новым сценарием и новой кнопкой внутри диапазона, называемой "newvideos3", И сценарий говорит, чтобы заменить innerhtml элемента с идентификатором "newvideos3", Но вместо этого все еще существующий родительский диапазон «newvideos» заменяется на видео 7-9 и "newvideos6" span, а не все, что добавляется в список. Почему, когда сценарий говорит, чтобы заменить "newvideos3"это произойдет?

Я также попытался перейти непосредственно к videosearch.php? Morevideos = 0 и видео с "newvideos3" загружен. Я нажал на кнопку, и следующие видео, 7-9 и новая кнопка, были добавлены в список. Затем я нажал эту новую кнопку, и 7-9 были заменены.

Есть ли какая-то политика или правило о замене родительских узлов innerhtml, когда сценарии генерируются из других сценариев или чего-то еще, и я просто не знаю об этом?

ОБНОВИТЬ

Я сделал несколько изменений, основанных на комментариях Barmar (спасибо!), Однако это все еще не работает. Похоже, сценарий действительно не обновлялся. Вот пересмотренный код.

Это то, что пользователь видит загруженным:

$newVideos = mysqli_query($con, "SELECT * FROM videos ORDER BY id DESC LIMIT 0,3");
//DESC is descending, last to first
//ASC is ascending, first to last

while ($row = mysqli_fetch_array($newVideos)) {
echo '<br> The video "'.$row["title"].'"';
}
?><span id="newvideos">
<br><button onclick="fetchvideos(this.value)" value="0">More Videos</button><br>
<script>
function fetchvideos(x) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("newvideos").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","videosearch.php?morevideos="+x,true);
xmlhttp.send();
}
</script>
</span>

И вот для чего отправляется запрос:

if (isset($_GET['morevideos'])) {
$morevideos = $_GET['morevideos'];
if (isset($morevideos)) {

$y = 3 + $morevideos;
$newVideos = mysqli_query($con, "SELECT * FROM videos ORDER BY id DESC LIMIT ".$y.",3");
//DESC is descending, last to first
//ASC is ascending, first to last

while ($row = mysqli_fetch_array($newVideos)) {
echo '<br> The video "'.$row["title"].'"';
}
echo '<span id="newvideos'.$y.'">';
?>
<br><button onclick="fetchvideos<?php echo $y; ?>(this.value, 'newvideos<?php echo $y; ?>')"  value="<?php echo $y; ?>">More Videos</button><br>';

<script>
function fetchvideos<?php echo $y; ?>(x, z) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(z).innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","videosearch.php?morevideos="+x,true);
xmlhttp.send();
}
</script>
</span>
<?php
}

}

Теперь, когда новый сгенерированный скрипт переименован во что-то другое, веб-консоль сообщает, что функция fetchvideos3 не существует Похоже, что HTML не обновляется с AJAX. Инспектор показывает, что скрипт добавлен на страницу, но отладчик не показывает, что скрипт добавлен. Я думаю, что поскольку новый сценарий не добавлен, кнопка, вызывающая новый сценарий, технически тоже не сможет вызвать сценарий, поэтому я не понимаю этого.

Я также дал всем уникальное сгенерированное имя и сделал его таким, чтобы новые функции использовали 2 аргумента вместо одного. Как мне запустить только что сгенерированные скрипты AJAX?