Document.createelement () Usage and precautions (incompatible under FF) _javascript tips

Source: Internet
Author: User
Tags string format

Today processed a date selector of the compatibility of IE and FF, this situation is difficult to find errors, looking for a long time to locate the error to create elements in JS method Document.createelement (), this method in IE support to create elements

Copy Code code as follows:

var inputobj = document.createelement
("<input type= ' text ' size= ' 8 ' style= ' border:0px;border-bottom:2px solid #c0c0c0;") "ReadOnly >");

However, such a situation is incompatible under FF.
There is special attention to the creation of the INPUT element: there are many elements related to input, such as: CheckBox, Radio, submit, Reset ..., so the creation of input is a very special use.

To create different input the correct approach is:

Copy Code code as follows:

<div id= "board" ></div>
<script type= "Text/javascript" >
<!--
var board = document.getElementById ("board");
var e = document.createelement ("input");
E.type = "Radio"; followed by the previous line of writing
var obj = Board.appendchild (e);
Obj.checked = true;
The following wording is also correct:
E.checked = true;
-->
</script>

For input, e.type in Netscape, Opera, and Firefox can be either before or after appendchild. However, in IE the type attribute must be in front, and the other attributes must be in the back.

IE to create elements, there is also a feature that can be created with attributes, such as: var e = document.createelement ("<input type= ' Radio ' name= ' r ' value= ' 1 '/> ');" This is not possible in other browsers, so we don't support it either.

Summarize:

• For non-input elements, in each browser, you can either write the change to the element's attributes before the display element (InsertBefore or AppendChild) or later.
• For the input element, the other attributes are written after the display element (InsertBefore or appendchild) for the compatible Ie,type attribute.
Recommended:

• Other attributes are written after the display element except for the type attribute of the INPUT element written before the display element (InsertBefore or appendchild).
• The return value of the InsertBefore or appendchild that is written after the display element is applied to the return value of CreateElement that was written before the display element (InsertBefore or AppendChild) when the attribute was changed.

Copy Code code as follows:

1.var echkbox=document.createelement ("input");
2.echkbox.setattribute ("Type", "checkbox");
3.echkbox.setattribute ("id", "inputID");
4.echkbox.setattribute ("name", "InputName");
5.echkbox.setattribute ("Value", "Inputvalue");
6.var Addhere=document.getelementbyid ("Someelementid");
7.addhere.appendchild (Echkbox);
8.echkbox.setattribute ("Checked", "checked");
9.alert (document.getElementById ("inputID"). checked);

<!--Document Method:
getElementById (ID) returns a reference to a specified node
getElementsByTagName (name) returns a collection of all the matching elements in the document
CreateElement (name) creates a new node of the specified type
createTextNode (text) creates a plain text node
Element method:
GetAttribute (ID) Returns the value of the specified property
SetAttribute (Id,value) assigns a value to a property
RemoveAttribute (ID) removes the specified property and its value
getElementsByTagName (name) returns a collection of all matching elements within a node
Node Method:
AppendChild (child) adds a new sub node to the specified node
RemoveChild (child) removes a node from a specified node
ReplaceChild (Newchild,oldchild) replaces the child node of the specified node
InsertBefore (Newchild,refchild) Inserts a new node in front of the same level of node
HasChildNodes () returns True if the node has a child node.
Node Property:
NodeName the name of the node in a string format
NodeType type of node in integer data format
NodeValue the value of a node in a usable format
ParentNode a reference to the parent node of a node
ChildNodes A collection of references that point to a child node
FirstChild a reference to the first child node in the binding of a child node
LastChild a reference to the last child node in the binding of a child node


Dynamically loading JS

Copy Code code as follows:

var rash=true;
var msg= "";
function Norash ()
{
if (Confirm (ok to cancel))
Rash=false;
}
function Rashit ()
{
SetInterval (' Getrss () ', inttime);
}
function Getrss ()
{
if (rash==true)
{
Head=document.getelementsbytagname (' head '). Item (0);
Script=document.createelement (' script ');
script.src= ' include/autoupdate.asp ';
Script.type= ' Text/javascript ';
Script.defer=true;
void (head.appendchild (script));
window.status=msg;
}
}
Rashit ();

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.