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

在这里，是一个变化。我确实添加了课程，可以吗？

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

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内插入节点列表？

3 个答案: