CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
leonidas56
leonidas56

Reputation: 915

Adding a button/text to all elements that have a class only with javascript/jquery and css

I have a wordpress site with this image boxes

each box is an event, this events have tags ,also reflectes in a class, what i need to do is all the elements with an specific class ("free" in this case) to have a little non clickable button or a text with a background that says "Free" in the upper corner of the box, no, this boxes are generated with a plugin and its just a shortcode, so i cannot directly change the html, so i tried doing it with just css and javascript

This is a single Event with the tag (named "tag-gratis")

<article id="post-9072" class="regular post-9072 post type-post status- 
publish format-standard has-post-thumbnail category-eventos185 tag- 
culturales tag-fuera-del-barrio tag-gratis">

<div class="inner-wrap animated">

    <div class="post-content">                      





            <div class="content-inner">

                <a 
href="https://vivirenuevacba.com/museo-genaro-perez/"></a><span 
class="post-featured-img" style="background-image: 
url(https://vivirenuevacba.com/wp-content/uploads/2019/01/genaro_perez_7- 
800x589.jpg);"></span>                  




                    <div class="article-content- 
wrap">

                        <span class="meta- 
category"><a class="eventos185" 
href="https://vivirenuevacba.com/category/eventos185/">EVENTOS</a></span>                                           
                        <div class="post- 
header">

                            <h3 
class="title">


<a href="https://vivirenuevacba.com/museo-genaro-perez/">                                            
Museo Genaro Pérez                                       
</a> 

</h3>


                                <span 
class="meta-author"><span>By</span> <a 
href="https://vivirenuevacba.com/author/Vics/" title="Entradas de Vics" 
rel="author">Vics</a></span> <span class="meta-category">| <a 
href="https://vivirenuevacba.com/category/eventos185/">EVENTOS</a></span> 



</div><!--/post-header-->

                    </div><!--article-content-wrap- 
->





            </div><!--/content-inner-->


    </div><!--/post-content-->

</div><!--/inner-wrap-->

</article><!--/article-->

Here is a simple button that i did with css

.button {
margin-top: 20px;
line-height: 60px;
font-weight: bold;
padding: 0 40px;
background: salmon;
border: none;
}

and here is my javascript

document.addEventListener('DOMContentLoaded', function() {

    $(function() {
    $('.tag-gratis').each(function() {
     var button = document.createElement("button");
     button.innerHTML = "GRATIS";

     var body = document.getElementsByClassName(".tag-gratis");
     body.appendChild(button);
    });

    });
    });




</script>

Now the button doesnt appear and i just get a

"Uncaught TypeError: body.appendChild is not a function"

Upvotes: 0

Views: 730

Answers (2)

Turnip
Turnip

Reputation: 36682

I don't think there is any need to use JavaScript here. A simple pseudo element would suffice.

.tag-gratis {
  position: relative;
}

.tag-gratis img {
  width: 100%;
}

.tag-gratis::after {
  content: "FREE";
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 10px;
  background: salmon;
  color: white;  
}
<article class="tag-gratis">
  <img src="//placehold.it/300x150">
</article>

Upvotes: 1

brk
brk

Reputation: 50316

Since document.getElementsByClassName is a collection you need to pass the index to get th element

Try this

document.getElementsByClassName(".tag-gratis")

Upvotes: 0

Related Questions