歡迎您光臨本站 註冊首頁

JS 控制html控制項

←手機掃碼閱讀     火星人 @ 2014-03-09 , reply:0
方法一:
<div id="myDiv"></div> // 容器
var strInnerHtml = "<input id="myInput" type="text">" ; // 要添加的控制項
docuemnt.all.Form1.myDiv.innerHTML = strInnerHtml ; // 執行添加動作
方法二:
<div id="myDiv"></div> // 容器
var strInnerHtml = "<input id="myInput" type="text">" ; // 要添加的控制項
// 執行添加動作
docuemnt.all.Form1.myDiv.insertAdjacentHTML( 'afterBegin', strInnerHtml ) ;
其中第一個參數可是如下幾個值:
afterBegin - 在文本前容器內插入內容;
beforeEnd - 在文本后容器內插入內容;
beforeBegin - 在文本前容器外插入內容;
afterEnd - 在文本后容器外插入內容;
方法三:
<div id="myDiv"></div> // 容器
var objNode = document.createElement( "INPUT" ); // 創建一個input控制項
// 開始指定控制項屬性
objNode.type = 'text' ;
objNode.id = 'myInput' ;
objNode.value = 'test' ;
docuemnt.all.Form1.myDiv.insertAdjacentElement( "beforeEnd", objNode); // 執行添加動作
其他的控制項控制方法:
childNodes(index) - 取得子控制項
parentElement - 取得父控制項
removeNode - 刪除當前控制項
insertAdjacentHTML動態插入行
關鍵字: insertadjacenthtml動態插入行
添加HTML內容與文本內容以前用的是innerHTML與innerText方法,最近發現還有
insertAdjacentHTML和insertAdjacentText方法,這兩個方法更靈活,可以在指定的地方插入html內容和文本內容.
insertAdjacentHTML方法:
在指定的地方插入html標籤語句
原型:insertAdajcentHTML(swhere,stext)
參數:
swhere: 指定插入html標籤語句的地方,有四種值可用:
1. beforeBegin: 插入到標籤開始前
2. afterBegin:插入到標籤開始標記之後
3. beforeEnd:插入到標籤結束標記前
4. afterEnd:插入到標籤結束標記后
stext:要插入的內容
<html>
<head>
<script language="javascript">
function myfun()
{
var obj = document.getElementById("btn1");
obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
}
</script>
</head>
<body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">
</body>
</html>
=============================
<head>


<title>24.htm insertAdjacentHTML插入新內容</title>
<script language="jscript">
function addsome()
{
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器內插入內容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器內插入內容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入內容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入內容</h2>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color='#ff00ff'">原來的內容</div><hr>
</body>
</html>
=================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
var num=0;
var No_sys=0;
function Add_button(){if(No_sys<8){
c_input.insertAdjacentHTML("beforeEnd","<div id="bar" num ""
oncontextmenu="Remove_button(bar" num ");return false"
style="background:red;width:40;height:20">" num "</div>");
num ;
No_sys ;
}
}
function Remove_button(obj){
obj.removeNode(true);
No_sys--;
}
</script>
<input type="button" onclick="Add_button()" value="動態加">
<input type="button" onclick="alert(c_input.innerHTML)" value="看">
<div id="c_input">
</div>
</BODY>
</HTML>


[火星人 ] JS 控制html控制項已經有559次圍觀

http://coctec.com/docs/java/show-post-59966.html