网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文
当前位置:书香门第 > IT认证 > JAVA认证

JS控制html控件的方法

栏目: JAVA认证 / 发布于: / 人气:2.95W

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

JS控制html控件的方法

  方法一:

《div id=“myDiv”》《/div》 // 容器

var strInnerHtml = “《input id=”myInput“ type=”text“》” ; // 要添加的控件

rHTML = strInnerHtml ; // 执行添加动作

  方法二:

《div id=“myDiv”》《/div》 // 容器

var strInnerHtml = “《input id=”myInput“ type=”text“》” ; // 要添加的控件

// 执行添加动作

rtAdjacentHTML( ‘afterBegin’, strInnerHtml ) ;

其中第一个参数可是如下几个值:

afterBegin - 在文本前容器内插入内容;

beforeEnd - 在文本后容器内插入内容;

beforeBegin - 在文本前容器外插入内容;

afterEnd - 在文本后容器外插入内容;

  方法三:

《div id=“myDiv”》《/div》 // 容器

var objNode = teElement( “INPUT” ); // 创建一个input控件

// 开始指定控件属性

= ‘text’ ;

= ‘myInput’ ;

e = ‘test’ ;

rtAdjacentElement( “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 = lementById(“btn1”);

rtAdjacentHTML(“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》 insertAdjacentHTML插入新内容《/title》

《script language=“jscript”》

function addsome()

{

rtAdjacentHTML(“afterBegin”,“《h1》在文本前容器内插入内容《/h1》”);

rtAdjacentHTML(“beforeEnd”,“《h2》在文本后容器内插入内容《/h2》”);

rtAdjacentHTML(“beforeBegin”,“《h4》在文本前容器外插入内容《/h1》”);

rtAdjacentHTML(“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_rtAdjacentHTML(“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){

veNode(true);

No_sys——;

}

《/script》

《input type=“button” onclick=“Add_button()” value=“动态加”》

《input type=“button” onclick=“alert(c_rHTML)” value=“看”》

《div id=“c_input”》

《/div》

《/BODY》

《/HTML》

Tags:控件 JS HTML