html中動態向ul或者ol中新增li元素
阿新 • • 發佈：2019-01-28
<!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>
<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>