如何在

Question

您好我的HTML和JavaScript存在问题：

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

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>

感谢大家的帮助，抱歉我的英语不好。

Answer 1

此处<li>是<ul>代码的子代，同样<span>应该是<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"

Answer 2

只需创建新的范围并将其附加到li

即可

var span = document.createElement("span");
span.innerHTML = '×';
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);

Answer 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= "×"
  newSpan.onclick = function() { this.parentElement.style.display='none' };
  newLi.appendChild(newSpan);
  ul.appendChild(newLi);
}

Answer 4

var span = document.createElement（＆＃39; span＆＃39;）;

span.value =＆＃39;项目＆＃39 ;;

var li = document.createElement（＆＃39; li＆＃39;）;

的document.getElementById（＆＃39; preventiviArea＆＃39）。使用appendChild（跨度）.appendChild（跨度）;