如何将节点列表插入几个Divs

Question

，所以我的问题中都喜欢。我使用节点列表来创建元素...创建节点后，我想将它们放入几个Div中：

node = document.createElement("p");
textMark = document.createElement("mark");
textnode = document.createTextNode(el[i]);
textMark.appendChild(textnode);
node.append(textMark)
document.getElementById("div1st").appendChild(node);
document.getElementById("div2nd").appendChild(node);

但是问题是，我的节点列表仅在第二个Div上显示...

在哪里？

我的代码外观：

//el是随机数组，从随机单词，阵列长度从10-20个单词到12个字母，有时单词是反向

function fillUsedPass(el){
        el = shuffle(el);
        var node;
        for(i in el){
            // thats how i check if my random word are reverse(main array with words arent reverse)
            index = indexPW.indexOf(el[i]);
            if(index<0){
            var letterPW = el[i].split("");
            letterPW.reverse();
            el[i]=letterPW.join("");
            }
            node = document.createElement("p");
            textMark = document.createElement("mark");
            textnode = document.createTextNode(el[i]);
            textMark.appendChild(textnode);
            node.append(textMark)   
        document.getElementById("mainPw").appendChild(node);
        document.getElementById("subPw").appendChild(node);
        }
    }

el=['some','like','done','elem','need','to','pass','value']
addlist();
function addlist(){
node = document.createElement("p");
for(i in el){
    textMark = document.createElement("mark");
    textnode = document.createTextNode(el[i]);
    textMark.appendChild(textnode);
    node.append(textMark)
    }
    document.getElementById("div1st").appendChild(node);
    document.getElementById("div2nd").appendChild(node);
    }

#div1st{ 
background-color:red;
width:300px;
min-height:30px;}
#div2nd{ 
width:400px;
height:30px;
background-color:blue;}
mark{
padding:5px}

<div id="div1st"></div>
<div id="div2nd"></div>

Answer 1

在这里，是一个更改。我确实添加了一堂课，可以吗？

添加了您的密码方法，现在正在工作。

let el = ['some', 'like', 'done', 'elem', 'need', 'to', 'pass', 'value']
function fillUsedPass(el) {
  //el = shuffle(el); <-- assume shuffle is working. 
  let targets = document.querySelectorAll('#mainPw,#subPw'); 
  targets.forEach(target => {
  
    el.forEach((e, index) => {
      // thats how i check if my random word are reverse(main array with words arent reverse)
      //index = indexPW.indexOf(el[i]);
      if (index < 0) {
        var letterPW = e.split("");
        letterPW.reverse();
        e = letterPW.join("");
      }
      let node = document.createElement("p");
      let textMark = document.createElement("mark");
      textnode = document.createTextNode(e);
      textMark.appendChild(textnode);
      node.append(textMark)
      target.appendChild(node);
    });
  
  });
}
function addlist(elements) {
  elements.forEach(elem => {
    let node = document.createElement("p");
    el.forEach(e => {
      let textMark = document.createElement("mark");
      let textnode = document.createTextNode(e);
      textMark.appendChild(textnode);
      node.append(textMark)
    });
    elem.appendChild(node);
  });
}
addlist(document.querySelectorAll('.inputDiv'));
fillUsedPass(el);

#div1st {
  background-color: red;
  width: 300px;
  min-height: 30px;
}
#div2nd {
  width: 400px;
  height: 30px;
  background-color: blue;
}
mark {
  padding: 5px
}

<div id="div1st" class="inputDiv"></div>
<div id="div2nd" class="inputDiv"></div>
<br />
<div id="mainPw" ></div>
<div id="subPw" ></div>

Answer 2

您需要克隆元素

node = document.createElement("p");
textMark = document.createElement("mark");
textnode = document.createTextNode(el[i]);
textMark.appendChild(textnode);
node.append(textMark)
document.getElementById("div1st").appendChild(node);
document.getElementById("div2nd").appendChild(node.cloneNode());

Answer 3

在这里，这就是您可以使用功能而不是克隆的方法。我不知道什么el是如此原谅我为那部分付出。

const createMyNode = (el, i) => {
  let node = document.createElement("p");
  let textMark = document.createElement("mark");
  textnode = document.createTextNode(el[i]); // <-- What is el?
  textMark.appendChild(textnode);
  node.append(textMark)
  return node;
};
let el = ['test', 'second']; 
document.getElementById("div1st").appendChild(createMyNode(el, 0));
document.getElementById("div2nd").appendChild(createMyNode(el, 1));

<div id="div1st"></div>
<div id="div2nd"></div>