如何通過JS，在html網頁上進行新增元素，包括div 以及下拉框等
阿新 • • 發佈：2019-01-20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>測試文件</title>
<script >
function add()
{
var s=document.getElementById("demo1")
var addDiv = document.createElement('div');
addDiv.innerHTML = '新增的div';
addDiv.id="addDivId"
s.appendChild(addDiv);
var addSELECT= document.createElement('select');
addSELECT.id="addSELECTId";
var addOptions=document.createElement("option");
addOptions.name="uyuyuy"
addOptions.innerHTML="fgfff"
addSELECT.appendChild(addOptions)
s.appendChild(addSELECT);
//刪除remove() ----> obj.options.remove(obj.selectedIndex);
//刪除所有----> obj.options.length = 0 ; 不是什麼removeAll 長度改0就好了
//獲取選中value---------> obj.options[obj.selectedIndex].value;
//獲取選中text ---------> obj.options[obj.selectedIndex].text;
//修改---------> obj.options[obj.selectedIndex] = new Option("新文字", "值") ;
}
</script>
</head>
<body>
<p id="demo0">
這是第0段
</p>
<p id="demo1">
<div>這是第1段</div>
</p>
<div id="demo2">
<p>這是第2段</p>
</div>
<input type="button" value="按鈕" onclick="add()" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>測試文件</title>
<script >
function add()
{
var s=document.getElementById("demo1")
var addDiv = document.createElement('div');
addDiv.innerHTML = '新增的div';
addDiv.id="addDivId"
s.appendChild(addDiv);
var addSELECT= document.createElement('select');
addSELECT.id="addSELECTId";
var addOptions=document.createElement("option");
addOptions.name="uyuyuy"
addOptions.innerHTML="fgfff"
addSELECT.appendChild(addOptions)
s.appendChild(addSELECT);
//刪除remove() ----> obj.options.remove(obj.selectedIndex);
//刪除所有----> obj.options.length = 0 ; 不是什麼removeAll 長度改0就好了
//獲取選中value---------> obj.options[obj.selectedIndex].value;
//獲取選中text ---------> obj.options[obj.selectedIndex].text;
//修改---------> obj.options[obj.selectedIndex] = new Option("新文字", "值") ;
}
</script>
</head>
<body>
<p id="demo0">
這是第0段
</p>
<p id="demo1">
<div>這是第1段</div>
</p>
<div id="demo2">
<p>這是第2段</p>
</div>
<input type="button" value="按鈕" onclick="add()" />
</body>
</html>