客户端插入控件

最新推荐文章于 2021-09-16 19:23:26 发布

转载最新推荐文章于 2021-09-16 19:23:26 发布 · 1.2k 阅读

文章标签：

本文围绕HTML展开，介绍了向div容器添加input控件的三种方法，包括使用innerHTML、insertAdjacentHTML和createElement，还说明了insertAdjacentHTML第一个参数的不同取值含义，此外提及了childNodes、parentElement、removeNode等控件控制方法。

本文中的控件泛指任何合法的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 －删除当前控件