I have 2 divs that all have the same css class, as follows:
/*div 1 */
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
</div>
</div>
</div>
<div >
<div >
<div >
<div googl="true">
heading
</div>
<div >
some text
</div>
<a href="http://test.com" target="">
<span >
<span >
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*div 2 */
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
</div>
</div>
</div>
<div >
<div >
<div >
<div googl="true">
heading
</div>
<div >
some text
</div>
<a href="http://example.com" target="">
<span >
<span >
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 >
.
.
.
</div>
</a>
/*div 2 */
<a href="http://example.com" target="">
<div >
.
.
.
</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 ?
CodePudding user response：
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");
CodePudding user response：
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);
CodePudding user response：
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 >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
</div>
</div>
</div>
<div >
<div >
<div >
<div googl="true">
heading
</div>
<div >
some text
</div>
<a href="http://test.com" target="">
<span >
<span >
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
</div>
</div>
</div>
<div >
<div >
<div >
<div googl="true">
heading
</div>
<div >
some text
</div>
<a href="http://example.com" target="">
<span >
<span >
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>