JavaScript code snippets related to AJAX and some browser Models

Source: Internet
Author: User

In. net development, making full use of free controls is a good thing. Similarly, in the opening of php, ajax class libraries can be used, however, if you cannot modify the control or class library to meet your needs, you must use the JS algorithm, provided that you have studied the method attributes of various objects in the browser model. It is especially cool to be familiar with CSS + HTML. JS language itself does not have high requirements.

1. Tips for dynamically deleting the content in the Table. You do not need to write too much code. One line:

Tb. removeNode (true)

2. Add rows dynamically. In addition to the CreateElement method, it can be short as follows:

<Table id = tb1> </table>

<SCRIPT>

Function addTable (){

Var row1 = tb1.insertRow ();

Var cell1 = row1.insertCell ();

Var cell2 = row1.insertCell ();

Cell1.innerText = "Baby gray beans ";

Cell2.innerText = "super stupid wolf"

}

</SCRIPT>

<Input type = "button" VALUE = "AddTable" onclick = "addTable ()">

3. dynamically Add Table in DIV

<SCRIPT>

Function addTable (){

Var tb1 = document. createElement ("table ";

Tb1.border = "1px ";

Var row1 = tb1.insertRow ();

Var cell1 = row1.insertCell ();

Var cell2 = row1.insertCell ();

Mydiv. appendChild (tb1 );

Cell1.innerText = "wanghr100 ";

Cell2.innerText = "panyuguang962"

}

</SCRIPT>

<BODY>

<Div id = mydiv style = "width: 400; height: 300;"> </div>

<Input type = "button" VALUE = "AddTable" onclick = "addTable ()">

4. Delete the Table in the DIV, As long as Div. innerHTML = "" is simple.

The above is part of the relatively short practical code. Of course there are other methods to achieve this, but it is generally longer than the above, such as combining the insertAdjacentHTML method of the div object, etc, the premise of using different methods under different needs is to study the method attributes of various objects in the browser model. It is especially cool to be familiar with CSS + HTML. JS language itself does not have high requirements.

The Document object is used as an example. The related methods include:

 

     

     

  • Method Description

     

     

  • AttachEvent

     

     

  • CreateAttribute

     

     

  • CreateComment

     

     

  • CreateDocumentFragment

     

     

  • CreateElement

     

     

  • CreateEventObject

     

     

  • CreateStyleSheet

     

     

  • CreateTextNode

     

     

  • DetachEvent

     

     

  • GetElementById

     

     

  • GetElementsByName

     

     

  • GetElementsByTagName

     

     

  • MergeAttributes

     

     

  • Recalc

     

     

  • Write

     

     

  • Writeln

     

     

 

The following methods take DIV objects as an example:

 

     

     

  • AddBehavior

     

     

  • AppendChild

     

     

  • ApplyElement

     

     

  • AttachEvent

     

     

  • ClearAttributes

     

     

  • CloneNode

     

     

  • Contains

     

     

  • DetachEvent

     

     

  • GetAdjacentText

     

     

  • GetAttribute

     

     

  • GetAttributeNode

     

     

  • GetElementsByTagName

     

     

  • HasChildNodes

     

     

  • InsertAdjacentElement

     

     

  • InsertAdjacentHTML

     

     

  • InsertAdjacentText

     

     

  • InsertBefore

     

     

  • MergeAttributes

     

     

  • Normalize

     

     

  • RemoveAttribute

     

     

  • RemoveAttributeNode

     

     

  • RemoveBehavior

     

     

  • RemoveChild

     

     

  • RemoveExpression

     

     

  • RemoveNode

     

     

  • ReplaceAdjacentText

     

     

  • ReplaceChild

     

     

  • ReplaceNode

     

     

  • SetActive

     

     

  • SetAttribute

     

     

  • SetAttributeNode

     

     

  • SetExpression

     

     

 

Others, such as drop-down list objects and drag-and-drop operations, can be sorted out and compared for some time to implement the same functions. Relatively short and brilliant code is worth adding to the favorites.

 

     

     

  • RemoveNode (true) is not supported by IE browsers. obj. parentNode. removeChild (obj) should be used );

     

     

  • InsertRow (x) insertCell (y) is a default parameter in IE, but not in IE browsers.

     

     

  • As for insertAdjacentElement innerText, these are all unique methods of IE, rather than W3C standards.

Related Article

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.