I. appending rows to a table
In your past experiences with Ajax, you may use JavaScript to append rows to an existing table, or create a new table containing table rows from the beginning. The document. createelement and document. appendchiid methods make this easy. You only need to use document. createelement to create table cells, and then use document. app-endchild to add these table cells to table rows. The next step is to use document. append-
Child adds the table rows to the table.
In Firefox, Safari, opera, and other browsers, this can be done. However, if Le is used, the table rows will not appear in the table. Worse, ie does not even throw any errors, or provides any clue about the issues that have been appended to the table but are not displayed in the table.
In this case, the solution is simple. IE allows you to add the tr element to the tbody element instead of the table element. For example, if an empty table is defined as follows:
<Table id = "mytable">
<Tbody id = "mytablebody"> </tbody>
</Table>
The correct way to Add rows to this table is to add rows to the table body rather than to the table, as shown below:
VaR cell = Document. createelement ("TD"). appendchild (document. createtextnode ("foo "));
Vat row = Document. createelement ("TR"). appendchild (cell );
Document. getelementbyld ("mytablebody"). appendchiid (ROW );
Xin Yun believes that this method can be used in all current browsers, including IE. If you get into the habit of using the table body, you don't have to worry about it.
Second, set the element style through JavaScript
With Ajax technology, web applications created by developers can communicate seamlessly with servers without completely refreshing pages. However, for a1ax requests, this page will not flash, so you may not know that some data on the page has been updated. You may want to modify the style of some elements to indicate that some data on the page has changed. For example, if the stock price has been seamlessly updated through Ajax requests, you can highlight the name of the stock.
You can use the setattribute method of the element to set the style of the element in JavaScript. For example, to modify the text in the span element to be displayed in red bold, you can use setattribute therapy as follows:
VaR spanelement = Document. getelementbyid ("myspan ");
Spanelement. setattribute ("style", "font-weight: bold; color: red ;");
Except IE, this method works on other browsers currently. For ie, the solution is to use the csstext attribute of the element style object to set the required style. Although this attribute is not standard, it is widely supported, as shown below:
VaR spanelement = Document. getelementbyid ("myspan ");
Spanelement.style.css text = "font-weight: bold; color: red ;";
This method works well in IE and most other browsers, except opera. To make Code You can use both the setattribute method and the csstext attribute of the element style object to port all current browsers:
VaR spanelement = Document. getelementbyid ("myspan ");
Spanelement. setattribute ("style", "font-weight: bold; color: red ;");
Spanelement.style.css text = "font-weight: bold; color: red ;";
In this way, the element style can be set normally in all browsers.
3. Set the class attribute of the element
After reading the previous section, I learned that I can use JavaScript to set the inline style of elements. You may take it for granted that it is easiest to simply set a Class component without element. Unfortunately, this is not the case. Similar to setting the inline style of an element, when the class attribute of an element is dynamically set through JavaScript, some specificity exists.
You may have guessed that IE is a different type in the current browser, but the solution is quite simple. When using browsers such as Firefox and Safari, you can use the setattribute method of the element to set the class attribute of redundancy, as shown below:
VaR element = Document. getelementbyid ("myelement ");
Element. setattribute ("class", "stylec1ass ");
Strangely, if you use the setattribute method and specify the attribute name as class, ie does not set the class attribute of the element. On the contrary, ie recognizes the classname attribute only when the setattribute method is used. In this case, the complete solution is: when using the setattribute method of the element, both Class and classname are used as attribute names, which are not as follows:
VaR element = Document. getelementbyid ("myelement ");
Element. setattribute ("class", "stylec1ass ");
Element. setattribute ("classname", "stylec1ass ");
Currently, most browsers use the class attribute name while ignoring the classname. IE is the opposite.
4. Create input Elements
The input element provides users with the means to interact with the page. HTML itself has a limited set of input elements, including single-line text boxes, multi-line text boxes, selection boxes, buttons, check boxes, and single-choice buttons. You may want to use javascfept to dynamically create such input elements as part of Ajax implementation.
Single-line text boxes, buttons, check boxes, and single-choice buttons can all be created as input elements, but the values of the type attribute are different. The selection box and the selection area have their own unique tags. It is very easy to dynamically create input elements using JavaScript (except single button, which is explained in the "Create single button" section), as long as some simple rules are followed. Using the document. createelement method, you can easily create a selection box and a selection area.
The tag name of the element that is passed by eateelement, such as select or textarea.
Single-line text boxes, buttons, check boxes, and single-choice buttons are slightly more difficult, because they all have the same element name input, but the value of the type attribute is different. Therefore, to create these elements, you must not only use the document. createelement method, but also call the setattribute method of the element to set the value of the type attribute. This is not difficult, but it is necessary to add a line of code.
Consider where to add the newly created input element to its parent element. Pay attention to the order of the document. createelement and setattribute statements. In some browsers, the newly created element is added to its parent element only when the element is created and the type attribute is set correctly. For example, some browsers may have strange behavior in the following code segment:
Document. getelementbyid ("formelement"). appendchild (button );
Button. setattribute ("type", "button ");
To avoid any strange behavior, make sure that all attributes, especially the type attribute, are set after the input element is created, and then add it to the parent element, as follows:
VaR button = Document. createelement ("input "):
Button. setattribute ("type", "button ");
Document. getelementbyid ("formelement"). appendchild (button );
Following this simple rule helps eliminate problems that may be difficult to diagnose in the future.
5. Add processing to the input elementProgram
Adding an event handler to an input element should be as easy as using the setattribute method and specifying the name of the event handler as the name of the required function handler, right? Error. The standard way to set the event handler for an element is to use the setattribute method of the element. It uses the event name as the attribute name and uses the function handler as the attribute value:
VaR formelement = Document, getelementbyid ("formelement ");
Formelement. setattribute ("onclick", "dofoo ();");
Except for IE, the code above can work in all current browsers. If you set the event handler for an element by using javascfept in IE, you must use the vertex method to reference the required event handler for the element instead of assigning it to an anonymous function, this anonymous function needs to call the required event handler, as shown below:
VaR formelement = Document, getelementbyid ("formelement ");
Formelement. onclick = function () {dofoo ();};
Note that the onclick event handler is referenced from the formelement by means of the vertex recording method. The onclick event handler is assigned an anonymous function, which only calls the required event handler. In this example, the event handler is dofoo.
Fortunately, this technology is supported by IE and all other current browsers, so you can set the event handler for form elements dynamically by using javascfept.
6. Create a single button
The best is always at the end. It is very difficult to dynamically create a radio button using JavaScript, because the method used to create a radio button in IE is quite different from that used in other browsers.
Except IE, all other browsers can use the following method to create a single button (these methods should be desired ):
VaR radiobutton = Document. createelement ("input ");
Radiobutton. setattribute ("type", "RADlO ");
Radiobutton. setattribute ("name", "radiobutton ");
Radiobutton. setattribute ("value", "checked ");
In this way, you can create a single-choice button in all the current browsers except IE, and it works properly. In Le, the single-choice button is displayed, but it cannot be selected, because clicking the single-choice button is not selected as expected. In ie, the method for creating a radio button is completely different from that used by other browsers and is not compatible at all. The preceding radio button can be created in IE as follows:
VaR radiobutton = decument. createelement ("<input type = 'radio'
Name = 'radiobutton' value = 'checked'> ");
Fortunately, you can use JavaScript to dynamically create radio buttons in IE, which is difficult and incompatible with other browsers.
How can we overcome this restriction? The answer is simple. This requires a browser-sniffing mechanism to let the script know which method to use when creating a single button. Fortunately, you don't have to check a large number of different browsers. Assume that only modern browsers are used. The script only needs to be differentiated between IE and other browsers.
Ie can recognize the special attribute of the Document Object known as uniqueid, which is called uniqueid. IE is the only browser that can recognize this attribute, so uniqueid is suitable for determining whether the script is running in IE.
When you use the docurnent. uniqueid attribute to determine the browser in which the script runs, you can combine ie-specific methods with standard-compatible methods. The following code is obtained:
If (document. uniqueid ){
// Internet Explorer
VaR radiobutton = decument. createelement ("<input type = 'radio'
Name = 'radiobutton' value = 'checked'> ");
}
Else {
// Standards compliant
VaR radiobutton = Document. createelement ("input ");
Radiobutton. setattribute ("type", "RADlO ");
Radiobutton. setattribute ("name", "radiobutton ");
Radiobutton. setattribute ("value", "checked ");
}
