Add javascript selector

Question

I would like to add html, css code to the wordpress homepage using javascript. The problem that there is no id or different css class on the objects that I would like to change (I would like to add text and button lint to the images).

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

// 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>

Are you sure you want an ANCHOR tag to contain an OL ?

mplungjan
– mplungjan

2020-03-29 06:50:31 +00:00
Commented Mar 29, 2020 at 6:50 — mplungjan
– mplungjan, Commented Mar 29, 2020 at 6:50

mplungjan · Accepted Answer · 2020-03-29 06:52:43Z

You are looking for querySelector or querySelectorAll

Also the path can be simplified

Are you sure you want to fill an achor with an OL?

I added the start parameter

[...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>

Danial Rahimy · Accepted Answer · 2020-03-27 19:17:33Z

1

you should use this

for first match element:

document.querySelector("Your selector here");

for get all matches elements:

document.querySelectorAll("Your selector here");

your code:

    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>";
    }

answered Mar 27, 2020 at 19:17

Danial Rahimy

256 bronze badges

3 Comments

Milan Grujić Over a year ago

Thanks both for the replay, but the html for all images should be different, image title, image excerpt, button with the link to the each image page... document.querySelector("a.lightbox-image")[0].innerHtml = "<ol><li>html data</li></ol>"; Something like this for each?

Milan Grujić Over a year ago

Solved, Thanks to both.

mplungjan Over a year ago

innerHtml should be innerHTML and it is not recommended to use a selector inside a loop and in the test. Your code should be

const anchors = document.querySelectorAll("a.lightbox-image"); for (let i = 0, n = anchors.length; i < n; i++){       anchors[i].innerHTML = "<ol><li>html data</li></ol>";     }

Collectives™ on Stack Overflow

Add javascript selector

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related