Можно ли добавить элемент списка, найдя контейнер списка по имени класса? - PullRequest
Новая
       7

Можно ли добавить элемент списка, найдя контейнер списка по имени класса?

0 голосов
/ 31 января 2019

У меня есть этот вложенный список в html: 

      <ul>
        <li > Group One(<span id = "amount1"> 0 </span>)
          <ul class = "names"> </ul> </li>

        <li> Group Two (<span id = "amount2"> 0 </span>)
          <ul class = "names" > </ul> </li>

        <li> Group Three (<span id = "amount3"> 0 </span>)
          <ul class = "names"> </ul> </li>

        <li> Group 4 (<span id = "amount4"> 0 </span>)
          <ul class = "names"> </ul> </li>
      </ul>

И я хочу добавить

элементы во внутренние списки, используя Javascript.

Когда я пытался с Javascript, мой код выглядел следующим образом: 

function newPerson (index,name) {
  let li = document.createElement("li")
  let t = document.createTextNode(name);
  let u = li.appendChild(t)
  document.getElementsByClassName("names")[index].appendChild(u)
}

function getNames () {
    var group1= [JOHN DOE, MARY JANE, KAT WU]
    var nameLower = group1[random].toLowerCase()
    console.log (nameLower)
    console.log (document.getElementsByClassName("names"))
    newPerson(nameLower,0)

И так далее для Группы 2. Функция getNames будет запускаться нажатием кнопки.

Этот вид работал, но мой список в итоге выглядел так:

Группа 1 (3) 

  John Doemary Janekat Wu

Группа 2 (2) 

  Lina Lialex Cole

... и т. Д.Где бы я хотел, чтобы это было

Группа 1 (3) 

John Doe 

Mary Jane 

Kat Wu

Группа 2 (2) 

Lina Li 

Alex Cole

Консольвсегда имеет правильное имя, но список узлов никогда не меняется (не уверен, должен ли он быть, когда я добавляю дочерний элемент).

Когда я добавляю элементы списка прямо в HTML, форматирование корректно, поэтому я не думаю, что это проблема CSS.

Я также пытался: 

function newPerson (index,name) {
      let li = document.createElement("li")
      let t = document.createTextNode(name);
      let u = li.appendChild(t)
      let v = document.getElementsByClassName("names")
      v.[index].appendChild(u)
    }

, но этот вложенный список вообще не появлялся.Есть ли что-то не так с тем, как я выбираю по классу?

Я бы предпочел не использовать идентификаторы, потому что мой список довольно длинный, и мой код уже выглядит достаточно грязно, но это невозможно без идентификаторов?

1 Ответ

0 голосов
/ 31 января 2019

Вам нужно добавить созданную li вместо u переменной, поэтому используйте 

v[index].appendChild(li);

вместо 

v.[index].appendChild(u);


function newPerson(index, name) {
  let li = document.createElement("li")
  let t = document.createTextNode(name);
  let u = li.appendChild(t)
  let v = document.getElementsByClassName("names")
  v[index].appendChild(li)
}

newPerson(2, 'Satpal')
<ul>
  <li> Group One(<span id="amount1"> 0 </span>)
    <ul class="names"> </ul>
  </li>

  <li> Group Two (<span id="amount2"> 0 </span>)
    <ul class="names"> </ul>
  </li>

  <li> Group Three (<span id="amount3"> 0 </span>)
    <ul class="names"> </ul>
  </li>

  <li> Group 4 (<span id="amount4"> 0 </span>)
    <ul class="names"> </ul>
  </li>
</ul>
...