quiero, he programado el siguiente js para obtener su valor y luego añadirlos de bajo de la imagen con una etiqueta <p></p>
let items = document.querySelector('.portfolop-lodging ');
for(i = 0; i < items.childElementCount; i++){
item =items.childNodes[i];
title = item.querySelector('.slick-track .widget-title a').text;
subTitle = item.querySelector('.slick-track .entry-tags ul li a').text;
content = item.querySelector('.work-cover');
p1 = document.createElement('p');
p2 = document.createElement('p');
t = document.createTextNode(title);
b = document.createTextNode(subTitle);
p1.appendChild(t);
p2.appendChild(b);
content.appendChild(p1);
content.appendChild(p2);
}
al colocarlo directamente desde la consola del navegador funciona, pero luego a cargarlo desde el archivo me nuestra el siguiente error
Uncaught TypeError: Cannot read property 'childElementCount' of null
<div id="dfd-portfolio" class="portfolop-lodging">
<div class="recent-works-list slick-initialized slick-slider">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox" style="opacity: 1; width: 1352px; transform: translate3d(0px, 0px, 0px);">
<div class="recent-works-item project portfolio-hover-style-22 slick-slide slick-current slick-active" data-category=" cabanas"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 338px;">
<div class="work-cover">
<div class="entry-thumb">
<img src="./img/cabaña2-600x550.png" alt="Rancho Paraíso">
<div class="portfolio-entry-hover">
<div class="title-wrap">
<h6 class="widget-title">
<a href="#" tabindex="0">Rancho Paraíso</a>
</h6>
<div class="entry-tags">
<ul>
<li>
<a href="#" tabindex="0">Cabañas</a>
</li>
</ul>
</div>
</div>
<a data-rel="prettyPhoto[184015acf55b451e08]" class="zoom-post" href="http://atemajacdebrizuela.com/wp-content/uploads/2018/03/cabaña2.png"
tabindex="0">
<i class="dfd-icon-zoom"></i>
</a>
<a data-rel="prettyPhoto[iframe]" class="quick-view" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso?iframe=true&width=100%25&height=100%25"
tabindex="0">
<span class="quick-view-text chaffle" data-lang="en">Quick view</span>
</a>
<a class="open-post" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso" tabindex="0">
<i class="dfd-icon-link"></i>
</a>
<a class="plus-link" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso" tabindex="0">
<span class="plus-link-container">
<span class="plus-link-out"></span>
<span class="plus-link-come"></span>
</span>
</a>
<a class="dfd-dotted-link" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso" tabindex="0">
<span class="dfd-left-line"></span>
<span></span>
<span class="dfd-right-line"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
let items = document.querySelector('.portfolop-lodging ');
, pon estalet items = document.getElementsByClassName('portfolop-lodging');
document.getElementsByClassName('portfolop-lodging');