如何在带有 的 html 中创建一个新的 <li>答案

【问题标题】：How to create a new <li> in html with inside如何在带有 的 html 中创建一个新的 <li>
【发布时间】：2017-05-25 09:24:36
【问题描述】：

您好，我的 HTML 和 JavaScript 有问题：

我有一个 <ul> 列表，没有任何 <li>... 有一个按钮必须创建一个新的<li>，里面有一个... 我不知道该怎么做... 这是代码：

JAVASCRIPT：

function somma(){
    var stringaFinestra=tipoFinestra + " " + tipoColore + " \u20ac" + costo;
    var ul = document.getElementById("preventiviArea");
    var li = document.createElement("li");
    li.setAttribute("class", "w3-display-container");
    li.appendChild(document.createTextNode(stringaFinestra));
    ul.appendChild(li);
}

HTML：

<input class="w3-button w3-orange w3-round-xxlarge" type="button" value="AGGIUNGI" onclick="somma()" style="width:200px; height:50px;">

<ul id="preventiviArea" class="w3-ul w3-card-4 w3-white">
</ul>

我将 w3 用于图形，我希望得到这个最终结果：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <ul id="preventiviArea" class="w3-ul w3-card-4 w3-white">
      <li class="w3-display-container">demo<span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
    	</ul>

感谢大家的帮助，对不起我的英语不好。

【问题讨论】：

我认为你的代码应该可以工作。它有什么问题？
您缺少跨度。您需要以相同的方式创建它，并使用li.appendChild(span)

标签： javascript html css html-table html-lists

【解决方案1】：

这里<li> 是<ul> 标签的子标签，同样 应该是<li> 标签的子标签所以你应该做和之前一样的事情

var ul = document.getElementById("preventiviArea");
var li = document.createElement("li");
li.setAttribute("class", "w3-display-container");
li.setAttribute("id", "something");
li.appendChild(document.createTextNode(stringaFinestra));
ul.appendChild(li);
var li = document.getElementById("something");
var span = document.createElement("span");
span.setAttribute("class", "w3-button w3-transparent w3-display-right");
span.setAttribute("onclick", "this.parentElement.style.display='none'");
span.textContent="times"

【讨论】：

【解决方案2】：

只需创建一个新跨度并将其附加到您的li

var span = document.createElement("span");
span.innerHTML = '&times;';
span.setAttribute("class", "w3-button w3-transparent w3-display-right");
span.onclick = function() { this.parentElement.style.display='none' };
li.appendChild(document.createTextNode(stringaFinestra));
li.appendChild(span);

【讨论】：

【解决方案3】：

你可以试试这个代码：

function somma(){
  var ul = document.getElementById("preventiviArea");
  var newSpan = document.createElement("span"); 
  newSpan.classList.add("w3-display-container")
  var newLi = document.createElement("span"); 
  newSpan.innerHTML= "&times;"
  newSpan.onclick = function() { this.parentElement.style.display='none' };
  newLi.appendChild(newSpan);
  ul.appendChild(newLi);
}

【讨论】：

【解决方案4】：

var span= document.createElement('span');

span.value='项目';

var li = document.createElement('li');

document.getElementById('preventiviArea').appendChild(span).appendChild(span);

【讨论】：