Add anchor tags dynamically to a div when page load in Javascript - Jquery

h1h2
August 6, 2022
222 views
2 votes
3 Answers

I have 2 divs that all have the same css class, as follows:

/*div 1 */
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
    <div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
        <div class="oxilab-flip-box-body-absulote">
            <div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
                <div class="oxilab-flip-box-style-data easing_easeInOutCirc">
                    <div class="oxilab-flip-box-style">
                        <div class="oxilab-flip-box-front">
                            <div class="oxilab-flip-box-1">
                                <div class="oxilab-flip-box-1-data">

                                </div>
                            </div>
                        </div>
                        <div class="oxilab-flip-box-back">
                            <div class="oxilab-flip-box-back-1">
                                <div class="oxilab-flip-box-back-1-data">
                                    <div class="oxilab-heading" googl="true">
                                        heading                                                        
                                    </div>
                                    <div class="oxilab-info">
                                        some text                                                        
                                    </div>
                                    <a href="http://test.com" target="">
                                        <span class="oxilab-button">
                                            <span class="oxilab-button-data">
                                            enter                                                                    
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>

/*div 2 */
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
    <div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
        <div class="oxilab-flip-box-body-absulote">
            <div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
                <div class="oxilab-flip-box-style-data easing_easeInOutCirc">
                    <div class="oxilab-flip-box-style">
                        <div class="oxilab-flip-box-front">
                            <div class="oxilab-flip-box-1">
                                <div class="oxilab-flip-box-1-data">

                                </div>
                            </div>
                        </div>
                        <div class="oxilab-flip-box-back">
                            <div class="oxilab-flip-box-back-1">
                                <div class="oxilab-flip-box-back-1-data">
                                    <div class="oxilab-heading" googl="true">
                                        heading                                                        
                                    </div>
                                    <div class="oxilab-info">
                                        some text                                                        
                                    </div>
                                    <a href="http://example.com" target="">
                                        <span class="oxilab-button">
                                            <span class="oxilab-button-data">
                                            enter                                                                    
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>

As you can see, both main divs have oxilab-flip-box-col-5 class and each has an ahref tag, now I want all the div components to be linked when the page is loaded, as follows:

/*div 1 */
<a href="http://test.com" target="">
    <div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
    .
    .
    .   
    </div>
</a>

/*div 2 */
<a href="http://example.com" target="">
    <div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
    .
    .
    .   
    </div>
</a>

I was able to write this code with JavaScript, but unfortunately, the code I wrote does not work.

var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5");
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://test.com");
aTag.innerText = "some text";
fisrtdiv.appendChild(aTag);

var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5");
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://example.com");
aTag.innerText = "some text";
seconddiv.appendChild(aTag);

Any idea how I can do this and link each div separately ?

Answers

getElementsByClassName return an HTMLCollection of elements.

Change your code to:

var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://test.com");
aTag.innerText = "some text";
fisrtdiv.appendChild(aTag);

var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5")[1];
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://example.com");
aTag.innerText = "some text";
seconddiv.appendChild(aTag);

You should try to DRY (Don’t Repeat Yourself). You can see that you do 2 times the same thing. What if you need to do it 100 times? Then your code will get messy quickly.

You’ll see 2 solutions in my code: the ugly way (not DRY) and the cleaner way (DRY). There’s a even cleaner way but let’s start with this 😉

    /*THE UGLY WAY*/
   /*
    var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
    var first_link = document.createElement('a');
    first_link.setAttribute('href',"http://test.com");
    first_link.innerText = "some text1";
    first_link.append(fisrtdiv);

    document.body.append(first_link);

    //we take again at index 0 because before this line we changed the position of the flip boxes
    var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
    var second_link = document.createElement('a');
    second_link.setAttribute('href',"http://example.com");
    second_link.innerText = "some text2";
    second_link.append(seconddiv);

    document.body.append(second_link);
    */

    /*CLEANER WAY*/
    var
      list_of_flip_boxes = document.querySelectorAll(".oxilab-flip-box-col-5"),
      list_of_links = [
        {
          text : "some text 1",
          href : "http://test.com"
        },
        {
          text : "some text 2",
          href : "http://example.com"
        },
      ];

    list_of_flip_boxes.forEach(function(flip_box, index){
      var
        link_element = document.createElement("a"),
        link_data = list_of_links[index];

      link_element.setAttribute('href', link_data.href);
      link_element.innerText = link_data.text;

      link_element.append(flip_box);

      document.body.append(link_element);
    })

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  
</head>

<body>

<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
    <div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
        <div class="oxilab-flip-box-body-absulote">
            <div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
                <div class="oxilab-flip-box-style-data easing_easeInOutCirc">
                    <div class="oxilab-flip-box-style">
                        <div class="oxilab-flip-box-front">
                            <div class="oxilab-flip-box-1">
                                <div class="oxilab-flip-box-1-data">

                                </div>
                            </div>
                        </div>
                        <div class="oxilab-flip-box-back">
                            <div class="oxilab-flip-box-back-1">
                                <div class="oxilab-flip-box-back-1-data">
                                    <div class="oxilab-heading" googl="true">
                                        heading                                                        
                                    </div>
                                    <div class="oxilab-info">
                                        some text                                                        
                                    </div>
                                    <a href="http://test.com" target="">
                                        <span class="oxilab-button">
                                            <span class="oxilab-button-data">
                                            enter                                                                    
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>


<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
    <div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
        <div class="oxilab-flip-box-body-absulote">
            <div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
                <div class="oxilab-flip-box-style-data easing_easeInOutCirc">
                    <div class="oxilab-flip-box-style">
                        <div class="oxilab-flip-box-front">
                            <div class="oxilab-flip-box-1">
                                <div class="oxilab-flip-box-1-data">

                                </div>
                            </div>
                        </div>
                        <div class="oxilab-flip-box-back">
                            <div class="oxilab-flip-box-back-1">
                                <div class="oxilab-flip-box-back-1-data">
                                    <div class="oxilab-heading" googl="true">
                                        heading                                                        
                                    </div>
                                    <div class="oxilab-info">
                                        some text                                                        
                                    </div>
                                    <a href="http://example.com" target="">
                                        <span class="oxilab-button">
                                            <span class="oxilab-button-data">
                                            enter                                                                    
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>
  
</body>

</html>

Here You Go:

var first_div = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var parent1 = first_div.parentNode;
var a_tag1 = document.createElement('a');

parent1.replaceChild(a_tag1, first_div)
a_tag1.appendChild(first_div)
a_tag1.setAttribute('href',"http://example.com");

/////////

var second_div = document.getElementsByClassName("oxilab-flip-box-col-5")[1];
var parent2 = second_div.parentNode;
var a_tag2 = document.createElement('a');

parent2.replaceChild(a_tag2, second_div)
a_tag2.appendChild(second_div)
a_tag2.setAttribute('href',"http://example.com");

Please signup or login to give your own answer.

Click here to cancel reply.

Add anchor tags dynamically to a div when page load in Javascript – Jquery

Answers