创建带有文本输入和按钮的 UL 列表

Create an UL-list with a text input and button

本文关键字：按钮 UL 列表 输入 文本 创建      更新时间：2023-09-26

我想写一些文本，单击一个按钮，添加的文本必须列出。

这是我目前拥有的： 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3-2</title>
<script type="text/javascript" src="js/oefening3-2.js"> </script>
</head>
<body>
<p> <span> geef een tekst in<input type="text" id="waarde"> <input type="button" value="Voeg toe" onClick="a();"></span></p>
<ol>
<p> <span id="waarden"> waarde </span> </p>
</ol>

而Javascript代码： 

function a()
{
var ingevoerd = document.getElementById("waarde").innerHTML;
document.getElementById("waarden").add(ingevoerd);  
}

我可以理解它没有多大意义，但我真的不知道该怎么做。输入一些文本，单击按钮，文本必须位于未编号的列表中。安妮能帮我吗？将不胜感激！

亲切问候！

HTML：

geef een tekst in<input type="text" id="waarde">
<input type="button" value="Voeg toe" onClick="a()">
<ul id="waarden"></ul>

Javascript代码：

function a() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(document.getElementById("waarde").value);
    node.appendChild(textnode);
    document.getElementById("waarden").appendChild(node);
}

JSFiddle demo： http://jsfiddle.net/BloodyKnuckles/y1fk1q70/

解释：

HTML 由几个元素组成：

  • 发短信
  • 文本输入
  • 按钮
  • 无序列表

按钮单击处理程序被指示在单击时执行函数a。

然后，Javascript 执行以下步骤：

  1. 创建列表节点元素。（尚未附加到 DOM [页面]。
  2. 获取文本输入的文本值，并从中创建文本节点元素。（也尚未附加到 DOM。
  3. 将文本节点追加到列表节点。
  4. 将列表节点追加到 DOM 中的无序列表。
相关文章：