How to add new object in masonry grid

hello this is my code

    `const article = document.createElement('article');
    article.className = 'portfolio-item pf-media pf-icons';
    article.setAttribute("style", "position: absolute; left: 0px; top: 0px;");
    article.innerHTML = `
        <div class="portfolio-image">
        [
        
        ](portfolio-single.html)
        <div class="portfolio-overlay">
        <div class="portfolio-desc" style="margin-top: 63px;">
        <h3>[Open Imagination](portfolio-single.html)</h3>
        <span>[Media](#), [Icons](#)</span>
        </div>
        <a href="`+imgUrl+`" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i>
        [](portfolio-single.html)
        </div>
        </div>`;
    document.getElementById('portfolio').appendChild(article);`

it does add the objects but its not showing.. does not refresh