在一组匹配的元素上向父元素添加子元素，并使用Parent Div href-Javascript

在这种情况下，我需要将一个子div附加到一组元素中。子元素是一个div，它有一个从其父元素获取href的锚链接

当我最初只使用一个div时，一切都很简单，但现在我正试图让它使用CSS类选择器处理一组元素，我似乎只是在兜圈子，这让人非常沮丧：(

这是一个代码笔链接：

下面是第二个代码笔，说明它应该是什么样子（这个示例只有一个父元素）：

我刚刚遇到的另一个问题是，当有许多实例使用同一个类时，如何使每个子元素始终从父元素获取is href

任何帮助都会很棒的，艾米丽

HTML

JS

//声明OUTERBOX
var outerbox=document.querySelectorAll（'.outerbox'）；
//获取父元素HREF属性
var parentLink=document.querySelectorAll（'.outerbox a'）；
对于（变量i=0；i

您的javascript有一些错误，请尝试以下操作

        <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>

document.querySelectorAll（'.outerbox'）.forEach（函数（元素）{
//获取父链接
//var innerHREF=element.querySelector（'a'）.href；
//你不需要var，我把它直接放在标有//*****
//创建innerBox
var innerBox=document.createElement（'div'）；
innerBox.classList.add（'innerBox'）；
//创建锚定链接并传入HREF VAR
var anchorTag=document.createElement（'a'）；
anchorTag.setAttribute（“href”，element.querySelector（'a'）.href）//***
anchorTag.innerHTML=“应用”；
innerBox.appendChild（anchorTag）；
元素。appendChild（innerBox）；
});

。这是正确的。IE不知道

nodeList.forEach

，但也不知道Array.forEach.IE知道

[].forEach.call（document.querySelectorAll（'.outerbox'），function（element）{

您好，修改后的答案现在在IE中有效吗？或者我需要进一步修改吗（我不担心IE<9）.谢谢，Emily.不，因为IE你必须接受

[].forEach.call（document.querySelectorAll（'.outerbox'），funct‌​ion（element）{

那么，在IE 10（IE11和Edge）之后，上述方法会在所有浏览器上都有效吗？还是我必须更改第一位以确保它在所有Microsoft浏览器中都有效？我真的很困惑。CSS只是用于演示，而不是在实际的网站上。我意识到这有点匆忙。谢谢你的帮助。Emily。

* {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;}

// 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);

        <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>