Skip to main content
se añadieron 2765 caracteres en el cuerpo
Origen Enlace
 <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&amp;width=100%25&amp;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>
 <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&amp;width=100%25&amp;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>
Origen Enlace

Anadir texto a carrusel con js

Tengo un carrusel corrusel introducir la descripción de la imagen aquí

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