javascript - 如何在带有 的 html 中创建一个新的

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> 的 child tag 所以你应该做你之前做的同样的事情

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"