I have a situation where I need to append a child div to a set of elements. The child element is a div that has an anchor link that takes the href from its parent element.
When I did this initially only using one div it was all straightforward enough, but now I'm trying to get it to work on a set of elements with a CSS class selector I seem to be just going round in round in circles and it's getting very frustrating :(
Here is a codepen link: https://codepen.io/emilychews/pen/XgrqWZ
Here is a 2nd codepen to how it should look (this example has only one parent element): https://codepen.io/emilychews/pen/RgbawK
Another problem that has just occurred to me is, how do i have it so that each child element always takes is href from the parent element when there are a number of instances using the same class?
Any help would be amazing. Emily.
HTML
<div class="outerbox">
<a href="https://www.google.co.uk">Here is a job Title</a>
</div>
<div class="outerbox">
<a href="https://www.bbc.co.uk">Here is a job Title</a>
</div>
CSS
* {font-family: arial; color: white;}
body {display: flex; justify-content: space-around;}
.outerbox {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 200px;
background: red;
position: relative;
padding: 20px;
box-sizing: border-box;
}
.outerbox a {margin-right: auto; margin-bottom: auto;}
.innerbox {
background: blue;
position: absolute;
padding: 15px 30px;
}
.innerbox a { text-decoration: none;}
JS
// DECLARE OUTERBOX
var outerbox = document.querySelectorAll('.outerbox');
// GET PARENT ELEMENT HREF ATTRIBUTE
var parentLink = document.querySelectorAll('.outerbox a');
for (var i = 0; i < parentLink.length; i+=1) {
var innerHREF = parentLink[i].getAttribute("href");
}
// CREATE INNERBOX
var innerBox = document.createElement('div');
innerBox.classList = "innerbox";
// CREATE ANCHOR LINK AND PASS IN HREF VAR
var anchorTag = document.createElement('a');
anchorTag.setAttribute("href", innerHREF); // pass in innerHREF var
anchorTag.appendChild(innerHREF);
anchorTag.innerHTML = "Apply";
for (var j = 0; j = innerbox.length; j+=1) {
innerbox[j].appendChild(anchorTag)
}
// ADD INNERBOX TO OUTERBOX
outerbox.appendChild(innerBox);
your javascript has some errors, try this
<script>
document.querySelectorAll('.outerbox').forEach(function(element){
//get parent link
//var innerHREF=element.querySelector('a').href;
//you need no var, i put it direct on line marked with //*****
//create innerBox
var innerBox = document.createElement('div');
innerBox.classList.add('innerbox');
// CREATE ANCHOR LINK AND PASS IN HREF VAR
var anchorTag = document.createElement('a');
anchorTag.setAttribute("href", element.querySelector('a').href); //***
anchorTag.innerHTML = "Apply";
innerBox.appendChild(anchorTag);
element.appendChild(innerBox);
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.