Когда пользователь прокручивает страницу, я собираюсь добавить один тег div и добавить один тег js в тот же div.
Теперь я указываю на родительский тег с помощью 'js_div_1', 'js_div_2', 'js_div_3' и т. д. И добавляю кое-что.
HTML-форма:
<div id = "divider" class = "long">
<!-- Firt iteration - when document ready-->
<div id = "js_div_1" >
<script async = "" id = "js_file_1" type = "text/javascript" src = "sample.js"></script>
</div>
</div>
Вот мой код:
$(document).ready(function(){
var divCounter = 0;
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
// you're at the bottom of the page
console.info("Reached bottom and load more content here");
divCounter++;
var slotDiv = document.createElement('div');
slotDiv.id = 'js_div_'+divCounter; // Id must be the same as slotName
$('#divider').append(slotDiv);
var adScript = document.createElement('script');
adScript.async = true;
adScript.id = "js_file_"+divCounter;
adScript.type = 'text/javascript';
adScript.src = "sample.js";
$('#js_div_'+divCounter).append(adScript);
}
});
Внутри содержимого файла sample.js:
console.info(document.currentScript);
var parentTag = document.currentScript;
parentTag.parentNode.removeChild(parentTag );
parentTag.parentNode.appendChild('Success');
Фактический вывод: (console.info)
<script>
console.info(document.currentScript);
var parentTag = document.currentScript;
parentTag.parentNode.removeChild(parentTag );
parentTag.parentNode.appendChild('Success');
</script>
Ожидаемый результат: (необходимо указать на parentNode div 'js_div_1' и добавить ответ)
<div id = "divider" class = "long">
<!-- 1st iteration - when document ready-->
<div id = "js_div_1" >
Success
</div>
<!-- 2nd iteration - when document ready-->
<div id = "js_div_1" >
Success
</div>
<!-- 3nd iteration -->
etc...
</div>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Чтобы иметь возможность сделать код javascript более быстрым, вам нужно немного изменить свой Html:
HTML-код:
<div id = "divider" class = "long">
<!-- Firt iteration - when document ready-->
<div id = "js_div_1" class = "js-div-container" data-iteration = "1" >
<script async = "" id = "js_file_1" class = "js-link" type = "text/javascript" src = "sample.js"></script>
</div>
</div>
Код Javascript:
jQuery(document).ready(function($){
$(window).scroll(function(){
var scrollHeight = $(document).height();
var scrollPosition = $(this).height() + $(this).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// when scroll to bottom of the page
var el = $('.js-div-container:last-child');
var iteration = parseInt(el.attr("data-iteration")) + 1;
el.clone().attr({'id': 'js_div_' + iteration, 'data-iteration': iteration}).appendTo('#divider');
el.find('.js-link').attr('id', 'js_file_' + iteration);
}
});
});
Этот код выдаст ожидаемый результат. Но я не понимаю, почему и что это за скрипт sample.js, который нужно загружать несколько раз?