html中动态向ul或者ol中添加li元素

最新推荐文章于 2025-07-05 14:19:28 发布

原创最新推荐文章于 2025-07-05 14:19:28 发布 · 1.7w 阅读

12 ·

CC 4.0 BY-SA版权

本文提供了一个使用JavaScript为HTML页面上的列表动态添加元素的示例。通过简单的文本输入框和按钮实现，用户可以将任意文本添加到页面的列表中。此外还介绍了如何设置字体颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function addt(){
//获取文本输入框中的内容
var text1=document.getElementById("t").value;
//获取到Ul列表
var ul=document.getElementById("u");
//创建元素Li
var li=document.createElement("li");
//向li中添加内容
li.innerHTML=text1;
//向ul追加元素li
ul.appendChild(li);

}

</script>
</head>

<body>
<ul id="u">

</ul>
<input type="text" id="t"/>
<input type="button" value="添加" onClick="addt()"/>


</body>

</html>

如果你想让字体有颜色，在输入框内输入：<font color="#FF0000">这里写你想要内容</font>