- 相關(guān)推薦
JS控制html控件的方法
為了方便廣大計算機愛好者，下面YJBYS小編為大家整理了關(guān)于JS控制html控件的方法，希望對你有所幫助。
方法一：
《div id=“myDiv”》《/div》 // 容器
var strInnerHtml = “《input id=”myInput“ type=”text“》” ; // 要添加的控件
docuemnt.all.Form1.myDiv.innerHTML = strInnerHtml ; // 執(zhí)行添加動作
方法二：
《div id=“myDiv”》《/div》 // 容器
var strInnerHtml = “《input id=”myInput“ type=”text“》” ; // 要添加的控件
// 執(zhí)行添加動作
docuemnt.all.Form1.myDiv.insertAdjacentHTML( ‘afterBegin’， strInnerHtml ) ;
其中第一個參數(shù)可是如下幾個值：
afterBegin - 在文本前容器內(nèi)插入內(nèi)容;
beforeEnd - 在文本后容器內(nèi)插入內(nèi)容;
beforeBegin - 在文本前容器外插入內(nèi)容;
afterEnd - 在文本后容器外插入內(nèi)容;
方法三：
《div id=“myDiv”》《/div》 // 容器
var objNode = document.createElement( “INPUT” ); // 創(chuàng)建一個input控件
// 開始指定控件屬性
objNode.type = ‘text’ ;
objNode.id = ‘myInput’ ;
objNode.value = ‘test’ ;
docuemnt.all.Form1.myDiv.insertAdjacentElement( “beforeEnd”， objNode); // 執(zhí)行添加動作
其他的控件控制方法：
childNodes(index) - 取得子控件
parentElement - 取得父控件
removeNode - 刪除當(dāng)前控件
insertAdjacentHTML動態(tài)插入行
關(guān)鍵字： insertadjacenthtml動態(tài)插入行
添加HTML內(nèi)容與文本內(nèi)容以前用的是innerHTML與innerText方法，最近發(fā)現(xiàn)還有
insertAdjacentHTML和insertAdjacentText方法，這兩個方法更靈活，可以在指定的地方插入html內(nèi)容和文本內(nèi)容。
insertAdjacentHTML方法：
在指定的地方插入html標(biāo)簽語句
原型：insertAdajcentHTML(swhere，stext)
參數(shù)：
swhere： 指定插入html標(biāo)簽語句的地方，有四種值可用：
1. beforeBegin： 插入到標(biāo)簽開始前
2. afterBegin：插入到標(biāo)簽開始標(biāo)記之后
3. beforeEnd：插入到標(biāo)簽結(jié)束標(biāo)記前
4. afterEnd：插入到標(biāo)簽結(jié)束標(biāo)記后
stext：要插入的內(nèi)容
《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插入新內(nèi)容《/title》
《script language=“jscript”》
function addsome()
{
document.all.paral.insertAdjacentHTML(“afterBegin”，“《h1》在文本前容器內(nèi)插入內(nèi)容《/h1》”);
document.all.paral.insertAdjacentHTML(“beforeEnd”，“《h2》在文本后容器內(nèi)插入內(nèi)容《/h2》”);
document.all.paral.insertAdjacentHTML(“beforeBegin”，“《h4》在文本前容器外插入內(nèi)容《/h1》”);
document.all.paral.insertAdjacentHTML(“afterEnd”，“《h5》在文本后容器外插入內(nèi)容《/h2》”);
}
《/script》
《/head》
《body onload=“addsome()”》
《div id=“paral” style=“fontsize：6;color=‘#ff00ff’”》原來的內(nèi)容《/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=“動態(tài)加”》
《input type=“button” onclick=“alert(c_input.innerHTML)” value=“看”》
《div id=“c_input”》
《/div》
《/BODY》
《/HTML》
【JS控制html控件的方法】相關(guān)文章：
javascript控制頁面控件隱藏顯示的兩種方法08-15
嵌入Flash的HTML方法11-03
js控制excel打印解決方案參考08-31
實現(xiàn)html方法結(jié)構(gòu)化10-01
HTML 行間距的設(shè)置方法07-22
如何設(shè)置html虛線邊框的方法11-03