Как получить document.currentscript из скрипта и указать parentNode

Когда пользователь прокручивает страницу, я собираюсь добавить один тег 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
268
1

Ответы 1

Чтобы иметь возможность сделать код 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, который нужно загружать несколько раз?

Другие вопросы по теме