Search code examples
javascriptjquery

How do I insert text into an empty div using javascript

I have tried for several hours to get this to work without any success. I have a site that lists recent posts. I need to insert text into any blank divs within that site. below is the html

<div class="pt-cv-taxoterm below_title"></div>

I haven't used javascript in many years and so I'm really rusty. I've searched on here and found several solutions but none of them work for me for some reason.

Here's a few that i've tried:

if (document.getElementsByClassName('div.pt-cv-taxoterm.below_title').is(':empty')) {
    document.getElementsByClassName('div.pt-cv-taxoterm.below_title').innerHTML = '<a href="https://revtommy.com/sermons/" title="Sermons" class="pt-cv-tax-blog">Sermons</a>';
}

if ($('.pt-cv-taxoterm below_title').is(':empty')){
    document.getElementsByClassName('pt-cv-taxoterm below_title').innerHTML = '<a href="https://revtommy.com/sermons/" title="Sermons" class="pt-cv-tax-blog">Sermons</a>';
}

This is a Wordpress site and I'm using a plugin to generate this particular block. It has a spot to add either custom CSS or Javascript for that plugin. Any help would be appreciated.

I tried multiple things that I found on this site.

Solution

  • You can update your jquery selector as $('.pt-cv-taxoterm.below_title:empty'), please note there is no space between both classes mentioned in selector and append :empty so that it will only return empty div.

    Since this selector will return an array, you need to use each function to loop over the array. Inside the function you can use $(element).html() function to update the html content inside given div.

    Try like below.

    $('.pt-cv-taxoterm.below_title:empty').each(function(index, element) {
  $(element).html('<a href="https://revtommy.com/sermons/" title="Sermons" class="pt-cv-tax-blog">Sermons</a>');
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="pt-cv-taxoterm below_title">not empty div</div>
<div class="pt-cv-taxoterm below_title"></div>

    References

    Alternatively if you wish to with plain javascript and not using jquery then try like below.

    Use let elements = document.getElementsByClassName('pt-cv-taxoterm below_title'); to get element list with given classes. Note that selector does not have div inside it. Also class names will have space between them and there it won't be appended by ..

    We need to convert elements into array with Array.from(elements) and loop over it using forEach. Inside it we need to check if it is empty or not using hasChildNodes() and update innerHTML if it is empty.

    // Retrieve elements with given classes.
let elements = document.getElementsByClassName('pt-cv-taxoterm below_title');

// Convert elements to array and loop over it.
Array.from(elements).forEach((el) => {
  // Check if given element is empty or not using hasChildNodes() function
  if (!el.hasChildNodes()) {
    // Set innerHTML
    el.innerHTML = '<a href="https://revtommy.com/sermons/" title="Sermons" class="pt-cv-tax-blog">Sermons</a>';
  }
});
    <div class="pt-cv-taxoterm below_title">not empty div</div>
<div class="pt-cv-taxoterm below_title"></div>

    References