87,996
社区成员
发帖
与我相关
我的任务
分享
...全文
请发表友善的回复…
发表回复
dylanOK 2002-08-28
- 打赏
- 举报
为什么我还是二个角呀！ :~(
dylanOK 2002-08-28
- 打赏
- 举报
动态创建HTML元素
孟子E章 2002-08-28
- 打赏
- 举报
创建指定的元素：
createElement Method
Creates an instance of the element for the specified tag.
Syntax
oElement = document.createElement(sTag)
Parameters
sTag Required. String that specifies the name of an element.
Return Value
Returns a reference to the new element.
Remarks
In Microsoft® Internet Explorer 4.0, the only new elements you can create are img, area, and option. As of Internet Explorer 5, you can create all elements programmatically, except for frame and iframe. In addition, the properties of these created elements are read/write and can be accessed programmatically. Before you use new objects, you must explicitly add them to their respective collections or to the document. To insert new elements into the current document, use the insertBefore or appendChild methods.
You must perform a second step when using createElement to create the input element. The createElement method generates an input text box, because that is the default input type property. To insert any other kind of input element, first invoke createElement for input, then set the type property to the appropriate value in the next line of code.
Attributes can be included with the sTag as long as the entire string is valid HTML. You should do this if you wish to include the NAME attribute at run time on objects created with the createElement method.
Attributes should be included with the sTag when form elements are created that are to be reset using the reset method or a BUTTON with a TYPE attribute value of reset.
Examples
This example uses the createElement method to dynamically update the contents of a Web page by adding an element selected from a drop-down list box.
<SCRIPT>
function fnCreate(){
oData.innerHTML="";
var oOption=oSel.options[oSel.selectedIndex];
if(oOption.text.length>0){
var aElement=document.createElement(oOption.text);
eval("aElement." + oOption.value + "='" + oText.value + "'");
if(oOption.text=="A"){
aElement.href="javascript:alert('A link.')";
}
}
oData.appendChild(aElement);
}
</SCRIPT>
<SELECT ID="oSel" onchange="fnCreate()">
<OPTION VALUE="innerText">A
<OPTION VALUE="value"><INPUT TYPE="button">
</SELECT>
<INPUT TYPE="text" ID="oText" VALUE="Sample Text">
<SPAN ID="oData" ></SPAN>
You can also specify all the attributes inside the createElement method itself by using an HTML string for the method argument. The following example demonstrates how to dynamically create two radio buttons utilizing this technique.
<HTML>
<HEAD>
<SCRIPT>
function createRadioButton(){
// Create radio button object with value="First Choice" and then insert
// this element into the document hierarchy.
var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")
document.body.insertBefore(newRadioButton);
// Create radio button object with value="Second Choice" and then insert
// this element into the document hierarchy.
newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='Second Choice'>")
document.body.insertBefore(newRadioButton);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" ONCLICK="createRadioButton()" VALUE="Create two Radio Buttons"><BR>
<INPUT TYPE="BUTTON" ONCLICK="alert ( document.body.outerHTML )" VALUE="Click here to see HTML">
<BODY>
</HTML>
createElement Method
Creates an instance of the element for the specified tag.
Syntax
oElement = document.createElement(sTag)
Parameters
sTag Required. String that specifies the name of an element.
Return Value
Returns a reference to the new element.
Remarks
In Microsoft® Internet Explorer 4.0, the only new elements you can create are img, area, and option. As of Internet Explorer 5, you can create all elements programmatically, except for frame and iframe. In addition, the properties of these created elements are read/write and can be accessed programmatically. Before you use new objects, you must explicitly add them to their respective collections or to the document. To insert new elements into the current document, use the insertBefore or appendChild methods.
You must perform a second step when using createElement to create the input element. The createElement method generates an input text box, because that is the default input type property. To insert any other kind of input element, first invoke createElement for input, then set the type property to the appropriate value in the next line of code.
Attributes can be included with the sTag as long as the entire string is valid HTML. You should do this if you wish to include the NAME attribute at run time on objects created with the createElement method.
Attributes should be included with the sTag when form elements are created that are to be reset using the reset method or a BUTTON with a TYPE attribute value of reset.
Examples
This example uses the createElement method to dynamically update the contents of a Web page by adding an element selected from a drop-down list box.
<SCRIPT>
function fnCreate(){
oData.innerHTML="";
var oOption=oSel.options[oSel.selectedIndex];
if(oOption.text.length>0){
var aElement=document.createElement(oOption.text);
eval("aElement." + oOption.value + "='" + oText.value + "'");
if(oOption.text=="A"){
aElement.href="javascript:alert('A link.')";
}
}
oData.appendChild(aElement);
}
</SCRIPT>
<SELECT ID="oSel" onchange="fnCreate()">
<OPTION VALUE="innerText">A
<OPTION VALUE="value"><INPUT TYPE="button">
</SELECT>
<INPUT TYPE="text" ID="oText" VALUE="Sample Text">
<SPAN ID="oData" ></SPAN>
You can also specify all the attributes inside the createElement method itself by using an HTML string for the method argument. The following example demonstrates how to dynamically create two radio buttons utilizing this technique.
<HTML>
<HEAD>
<SCRIPT>
function createRadioButton(){
// Create radio button object with value="First Choice" and then insert
// this element into the document hierarchy.
var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")
document.body.insertBefore(newRadioButton);
// Create radio button object with value="Second Choice" and then insert
// this element into the document hierarchy.
newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='Second Choice'>")
document.body.insertBefore(newRadioButton);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" ONCLICK="createRadioButton()" VALUE="Create two Radio Buttons"><BR>
<INPUT TYPE="BUTTON" ONCLICK="alert ( document.body.outerHTML )" VALUE="Click here to see HTML">
<BODY>
</HTML>
aeonwang 2002-08-28
- 打赏
- 举报
createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念！ 祝你学习好运！
aeonwang 2002-08-28
- 打赏
- 举报
这涉及到W3C DOM对象模型的知识，其实很简单的，网上有很多这方面的资料，另外建议顺便看一下DHTML DOM和XML等相关的知识，对你有很大的帮助！
