如何在几个div中插入节点列表？

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

但问题是，我的节点列表只显示在第 2 个div...哪里有问题？

我的代码看起来像：

// el是随机数组，来自随机词，数组长度为10-20个词，每个词由3到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

您需要克隆该元素

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 2

在这里，这是您可以使用函数而不是克隆的方法。我不知道 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>

Answer 3

这里，是一个变化。我添加了一个class，可以吗？

添加了您的密码方法，现在可以使用了。

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>

如何在几个div中插入节点列表？

how to insert node list inside few divs?

javascript

nodelist