为了方便广大计算机爱好者，下面YJBYS小编为大家整理了关于JS控制html控件的方法，希望对你有所帮助。

　　方法一：

　　《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》