JS in document.createelement () usage and precautions

Source: Internet
Author: User

Today deal with a date selector of IE and FF compatibility problem, this situation is difficult to find errors, looking for a long time to put the error into the creation of the element JS method Document.createelement (), this method under IE support to create elements

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 creating input is a very special use.

The correct way to create a different input is to:

<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. But in IE, the type attribute must be before the other attribute must be in the back.

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

Summarize:

    • For non-input elements, in each browser, you can either write changes to the attributes of the element 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) in order to be compatible with the Ie,type property.

Recommended:

    • Except for the INPUT element's type attribute written before the display element (InsertBefore or AppendChild), other properties are written after the display element.
    • When a property is changed, the return value of the createelement that is written before the display element (InsertBefore or AppendChild) is written in the InsertBefore or appendchild after the display element.
    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 the specified node.
getElementsByTagName (name) returns a collection of all matching elements in the document
CreateElement (name) creates a new node of the specified type
createTextNode (text) Create a plain text node
Element method:
GetAttribute (ID) Returns the value of the specified property
SetAttribute (id,value) Assigning a value to a property
RemoveAttribute (ID) removes the specified attribute 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 sub-nodes of the specified node
ReplaceChild (Newchild,oldchild) replaces sub-nodes of a specified node
InsertBefore (Newchild,refchild) Inserts a new node in front of a node at the same level
HasChildNodes () returns True if the node has a child node.
Node Property:
NodeName the name of the node in the form of a string
NodeType types of nodes that are stored in an integer data format
NodeValue the value of the node in the available format
ParentNode a reference to the parent node of the junction point
ChildNodes A collection of references that point to a child node
FirstChild a reference to the first child node in the Union of a child node
LastChild a reference to the last child node in the Union of a child node

Dynamic Loading JS

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 ();

JS in document.createelement () usage and precautions

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.