Добавить javascript селектор

Question

Я хотел бы добавить код html, css на домашнюю страницу wordpress, используя javascript. Проблема в том, что на объектах нет идентификатора или другого класса css, который я хотел бы изменить (я хотел бы добавить текст и пуговицу к изображениям).

Я пробовал что-то подобное, но не может найти решение для указанной проблемы c

// Inspect element shows something like

//    #p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image


// I have tried something like this but can't find solution for the specific problem

document.getElementById('#p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image').innerHTML = '<ol><li>html data</li></ol>';

<div class="p-tabs-content">
  <!--Portfolio Tab / Active Tab-->
  <div class="p-tab active-tab" id="p-tab-1">
    <div class="project-carousel owl-theme owl-carousel">
      <!--Gallery Item-->
      <div class="gallery-item">
        <div class="inner-box">
          <div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
            <!--Overlay Box-->
            <div class="overlay-box">
              <div class="content">
                <a href="/lazy-bag-bez/"><span class="icon fa fa-link"></span></a>
                <a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--Gallery Item-->
      <div class="gallery-item">
        <div class="inner-box">
          <div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
            <!--Overlay Box-->
            <div class="overlay-box">
              <div class="content">
                <a href="/lazy-bag-beli/"><span class="icon fa fa-link"></span></a>
                <a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--Gallery Item-->
      <div class="gallery-item">
        <div class="inner-box">
          <div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
            <!--Overlay Box-->
            <div class="overlay-box">
              <div class="content">
                <a href="/lazy-bag-crni/"><span class="icon fa fa-link"></span></a>
                <a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

Answer 1

Вы должны использовать это

для первого элемента совпадения:

document.querySelector("Your selector here");

для получения всех совпадений элементов:

document.querySelectorAll("Your selector here");

ваш код:

    for(var i = 0 ; i < document.querySelectorAll("a.lightbox-image").length ; i++){
       document.querySelectorAll("a.lightbox-image")[i].innerHtml = "<ol><li>html data</li></ol>";
    }

Answer 2

Вы ищете querySelector или querySelectorAll

Также можно упростить путь

Вы уверены, что хотите заполнить акор с OL?

Я добавил начальный параметр

[...document.querySelectorAll('.gallery-item a.lightbox-image')]
  .forEach(
    (a,i) => a.innerHTML = '<ol start="'+(i+1)+'"><li>html data</li></ol>'
  );

<div class="p-tabs-content">
  <!--Portfolio Tab / Active Tab-->
  <div class="p-tab active-tab" id="p-tab-1">
    <div class="project-carousel owl-theme owl-carousel">
      <!--Gallery Item-->
      <div class="gallery-item">
        <div class="inner-box">
          <div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
            <!--Overlay Box-->
            <div class="overlay-box">
              <div class="content">
                <a href="/lazy-bag-bez/"><span class="icon fa fa-link"></span></a>
                <a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--Gallery Item-->
      <div class="gallery-item">
        <div class="inner-box">
          <div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
            <!--Overlay Box-->
            <div class="overlay-box">
              <div class="content">
                <a href="/lazy-bag-beli/"><span class="icon fa fa-link"></span></a>
                <a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--Gallery Item-->
      <div class="gallery-item">
        <div class="inner-box">
          <div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
            <!--Overlay Box-->
            <div class="overlay-box">
              <div class="content">
                <a href="/lazy-bag-crni/"><span class="icon fa fa-link"></span></a>
                <a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>