How to create dynamic content inside dynamic content in javascript

Question

I get null when I try to do getelementbyid on dynamic loaded in div I tried window.onload = function () { and $(window).load(function() {

index.html:

<main >

    <div id="main-div">

    </div>

</main>

homepage.html:

<!-- categories Slider -->
<div class="container-fluid">
    <div class="site-slider-two px-md-4">
        <div class="row slider-two text-center" id="homepageCategories">

javascript:

function loadHomePage() {

    $("#main-div").load("homepage.html", function () {
}
}

function showCategoriesHomepage(categories) {

    window.onload = function () {

        homepageCategoriesId = document.getElementById(homepageCategories);

        homepageCategoriesId.innerHTML = "";

        //For loop that loops true all the categories
        for (var i = 0; i < messages.length; i++) {

            //Create dynamic li elements with child p elements
            var mainDiv = document.createElement('div');
            var span = document.createElement('span');
            var img = document.createElement('img');


            span.setAttribute("class", "border site-btn btn-span");

            img.setAttribute("src", categories.image);

            //Fills the p elements with user_id, description, created_at
            span.appendChild(document.createTextNode(categories.name));
            mainDiv.appendChild(img);
            mainDiv.appendChild(span);
}
}

After the homepage is loaded I make a call to the api and after that is finished I try to getelementbyid on the div but it returns null

When/where are you calling showCategoriesHomepage function? Did you read the jQuery load() documentation? The method provides a callback, why not use it? Why do you use window.onload from within your function? You need to provide a minimal reproducible example that allows to reproduce the problem and describe clearly what you want to achieve. — MrUpsidown
– MrUpsidown, Commented Feb 22, 2020 at 18:25

davidev · Accepted Answer · 2020-02-22 18:19:09Z

0

Change this line...

homepageCategoriesId = document.getElementById(homepageCategories);

...to this

homepageCategoriesId = document.getElementById('homepageCategories');

answered Feb 22, 2020 at 18:19

davidev

8,6955 gold badges35 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Ponzo Over a year ago

thats when you know you have programmed for to long XD

davidev Over a year ago

@ThomasPonzo I know that sir haha

Collectives™ on Stack Overflow

How to create dynamic content inside dynamic content in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related