Как вставить список узлов внутри нескольких div? - PullRequest
Новая
       17

Как вставить список узлов внутри нескольких div?

0 голосов
/ 04 марта 2019

Так как в моем вопросе.я использую список узлов для создания элемента ... После того, как я создаю узел, я бы хотел поместить их в несколько 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>

Ответы [ 3 ]

0 голосов
/ 04 марта 2019

Здесь вы можете использовать функцию, а не клонировать.Я не знаю, что 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>
0 голосов
/ 05 марта 2019

Вот изменение.Я добавил класс, это нормально?

Добавлен метод паролей, теперь работает. 

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>
0 голосов
/ 04 марта 2019

Вам необходимо клонировать элемент 

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