Question 368053 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – 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.

Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    document.addEventListener("DOMContentLoaded", function() {
    var divs = document.querySelectorAll('.pt-cv-taxoterm.below_title');
    for (var i = 0; i < divs.length; i++) {
        if (!divs[i].textContent.trim()) {
            divs[i].innerHTML = '<a href="https://revtommy.com/sermons/" title="Sermons" class="pt-cv-tax-blog">Sermons</a>';
        }
    }
});

    This code listens for the DOMContentLoaded event, which ensures that the DOM is fully loaded before executing the JavaScript code. It then selects all elements with the specified classes, checks if they are empty, and if so, inserts the desired HTML content into them.

    Login or Signup to reply.
  3. 0

    Here’s a simple example of how to insert text into an empty using JavaScript:

    var divs = document.getElementsByClassName('pt-cv-taxoterm below_title');
for (var i = 0; i < divs.length; i++) {
    if (divs[i].innerHTML.trim() === '') {
        // Insert the desired content
        divs[i].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>
    Login or Signup to reply.
  4. 0

    You can get all DIVS with a specified class or ID using querySelectorAll
    then one can pass .innerHTMl to insert desired content. I would recommend for larger loops or content applications use a libary like react or built-in functions like .createElement and append.

    //Returns all DIVS with the specified class
let divs = document.querySelectorAll('.divX');

//Loops though and gives content if that given DIV is empty
for (let i = 0; i < divs.length; i++) {
    if (divs[i].innerHTML.trim() === "") {
        //Create or give content.
        divs[i].innerHTML = "<h1>This inserted</h1>"
    }
}
    <div class="divX">This allready here</div>
<div class="divX"></div>

    Also in this scenario using .is(':empty') is not really a good solution as we can just use equals false, or the .trim() solution wich works.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search