如何摆脱我的无序列表中多余的项目符号？答案

【问题标题】：How to get rid of extra bullets in my unordered list?如何摆脱我的无序列表中多余的项目符号？
【发布时间】：2020-06-19 14:58:43
【问题描述】：

您好，我正在使用输入法将数组打印到我的 DOM。我可以让用户输入打印出列表，但是项目符号太多。下面是我的代码：

function addPokemon() {
    var pokemonName = document.getElementById("pokemon-name-container");
    pokemonName.innerHTML = document.getElementById("pokemon-names").value;

    for (var i = 0; i < element.length; i++) {
        if (typeof element[i].value !== "undefined") {
            pokemonArray.push(element[i].value);
        }
    }
    console.log(pokemonArray);
    for (var i = 0; i < pokemonArray.length; i++) {
        document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "<li>";
    }
}

var pokemonArray = [];
var element = document.getElementsByClassName("move-container");

如何解决这个问题？

为提问的人添加了什么元素

【问题讨论】：

element 是什么？
这里缺少很多东西：element 是什么？ pokemonArray 在哪里/如何声明？ pokemon-names 元素的 HTML 是什么样的？等\
刚刚添加了我的 HTML 的新图片并解释了 element 和 pokemonArray 的来源

标签： javascript html arrays list unordered

【解决方案1】：

要关闭<li>，你需要一个/，

document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "</li>";

发生的情况是浏览器在看到另一个<li> 时会自动关闭您的第一个<li>。然后它将其他 <li> 视为另一个项目，并自动关闭它。

【讨论】：

啊抱歉，我没有在 OP 中看到其他空的 <li>
感谢这解决了它。还有一件事我可能会问，如何让“Charmander”这个名字出现在顶部而不是底部？

【解决方案2】：

问题是您在开始附加另一个元素之前没有关闭列表项元素。

.innerHTML += "<li>" + pokemonArray[i] + "<li>"; // The 2nd one not closing...

它在你想要的每一个之后隐式地创建一个空列表项。

示例

DOM 是我编的，因为你没有提供。

const pokemonArray = [];
const element = document.querySelectorAll('.pokemon');

addPokemon();

function addPokemon() {
  var pokemonName = document.getElementById("pokemon-name-container");
  pokemonName.innerHTML = document.getElementById("pokemon-names").value;

  for (var i = 0; i < element.length; i++) {
    if (typeof element[i].value !== "undefined") {
      pokemonArray.push(element[i].value);
    }
  }
  console.log(pokemonArray);
  for (var i = 0; i < pokemonArray.length; i++) {
    document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "</li>";
  }
}

<input type="input" id="pokemon-names" />

<input type="text" class="pokemon" value="Bulbasaur" />
<input type="text" class="pokemon" value="Charmander" />
<input type="text" class="pokemon" value="Squirtle" />

<ul id="pokemon-name-container"></ul>

<ul id="pokemon-container"></ul>

使用 JavaScript 操作 DOM

更好的方法是在 JavaScript 中创建 DOM 元素并将它们附加到容器中。您还可以在每次添加新神奇宝贝时存储状态并重新渲染列表。

const POKEMON_NAMES = [ 'Bulbasaur', 'Charmander', 'Squirtle' ];

const state = {
  pokemon: []
};

let sel = document.querySelector('.available-pokemon');
sel.appendChild(new Option('', ''));
POKEMON_NAMES.forEach(name => sel.appendChild(new Option(name, name)));

sel.addEventListener('change', addPokemon);

function addPokemon(e) {
  let selectedPokemon = e.currentTarget.value;
  if (selectedPokemon.length > 0 && !state.pokemon.includes(selectedPokemon)) {
    state.pokemon.push(selectedPokemon);
    renderPokemonList();
  }
}

function renderPokemonList() {
  let container = document.querySelector('.pokemon-container');
  emptyElement(container);
  state.pokemon.sort().forEach(pokemon => {
    let listItem = document.createElement('LI');
    listItem.textContent = pokemon;
    container.appendChild(listItem);
  });
}

function emptyElement(element) {
  while (element.firstChild) {
    element.removeChild(element.lastChild);
  }
}

.pokemon-container {
  border: thin solid grey;
  min-height: 1em;
  width: 50%;
  padding: 0.5em 2em;
}

<select class="available-pokemon"></select>
<ul class="pokemon-container"></ul>

【讨论】：