Javascript DOM Programming Art--seventh chapter dynamic creation of tags

How to add tags dynamically to a document in your browser:

I. Traditional methods: The following two types are HTML-specific properties that cannot be used in other markup language documents.

1. document.write (): The biggest drawback is that it violates the principle that "behavior should be separated from performance".

2. InnerHTML properties: When a large piece of HTML content needs to be inserted into a document, the InnerHTML property can be done quickly and easily. However, the innerHTML property does not return any references to the content that was just inserted.

At any time, Dom can be substituted for innerHTML.

Two. Using the DOM method: The DOM is the representation of the document.

1. createelement (ele): only element nodes can be created

2. createTextNode (text): Creating a textual node

The nodes created by the above two methods are DocumentFragment objects (document fragments), although already exist in the DOM, but also have their own DOM properties, but can not be displayed in the browser, to be added through the AppendChild method, InsertBefore method.

3. Parentele.appendchild (Childele): Make a Node A child node of an existing node.

4. Parentele.insertbefore (Newele,targetele): In fact, it is not necessary to understand Parentele specifically which, because the targetele element of the ParentNode attribute value is it.

5. JS does not provide a InsertAfter method, but we can encapsulate a function ourselves:

InsertAfter (OUL,OP);//To cite an example

function InsertAfter (Newele,targetele) {

var oparent = Targetele.parentnode;

if (Oparent.lastchild = = Targetele) {

Oparent.appendchild (Newele);

}else{

Oparent.insertbefore (newele,targetele.nextsibling);

}

}

　　

For specific use, ensure that the principle of smooth degradation, or to the beginning of the function of the browser support or the existence of the element detection.

Three. Ajax: A technique used to summarize the contents of an asynchronous loading page. relies on JavaScript.

1. XMLHttpRequest object: Core. acts as an intermediary between the script (client) and the server in the browser. The previous request is issued by the browser, JS through the object itself can also send requests and processing responses.

1) Create a text.txt file next to test.html that acts as the output of the server script. ------> Note the same-origin policy: Requests sent with the XMLHttpRequest object can only access data that is in the same domain as the HTML in which they reside, and cannot send requests to other domains. In addition, some browsers restrict the protocols that Ajax requests use.

2) encapsulate a function that gets the XMLHttpRequest object:

function Gethttpobject () {
if (typeof XMLHttpRequest = = "undefined") {
XMLHttpRequest = function () {
try {return new ActiveXObject ("msxml2.xmlhttp.6.0");}
catch (e) {}
try {return new ActiveXObject ("msxml2.xmlhttp.3.0");}
catch (e) {}
try {return new ActiveXObject ("Msxml2.xmlhttp");}
catch (e) {}
return false;
};
};
return new XMLHttpRequest ();
};

3) encapsulate a Get Getnewcontent function:

A. Specify the request target (the open method of the XMLHttpRequest object); b. Identify how the response is handled (onReadyStateChange event); c. Send request (the Send method of the XMLHttpRequest object)

When the server sends a response back to the XMLHttpRequest object, the browser updates the value of the ReadyState property at different stages, with a total of 5 possible values.

The data sent back by the access server is done through two properties: the Xmlhttprequest.responsetext property and the Xmlhttprequest.responsexml property.

function Getnewcontent () {
var request = Gethttpobject ();
if (request) {
Request.open ("GET", "Text.txt", true);
Request.onreadystatechange = function () {
if (request.readystate = = 4) {
var para = document.createelement ("P");
var txt = document.createtextnode (request.responsetext);
Para.appendchild (TXT);
Document.body.appendChild (para);
};
};
Request.send (NULL);
}else {
Alert ("Sorry, your browser doesn ' t support XMLHttpRequest");
};
};

PS: Do not ignore the asynchronous nature of Ajax, the script will continue to execute after sending the XMLHttpRequest request, and will not wait for the response to return.

Therefore, if other scripts are dependent on the server's response, then the response code must be transferred to the function assigned to the onReadyStateChange property.

2. Progressive enhancement and Ajax: The best way to build an AJAX site is to build a regular website and then hijax it.

3. Hijax:

Ajax applications rely primarily on the backend server, which is actually the server-side scripting language that does most of the work, XMLHttpRequest the object as an intermediary between the service and client scripts, and is only responsible for delivering requests and responses.

If this middleman is turned on, the request and response between the browser and the server should be completed instead of interrupted, but it may take a little longer.

AJAX relies primarily on server-side processing rather than client processing. That being the case, there is no reason why a smooth deterioration cannot be achieved.

PS: How to judge the separation of structure and behavior?

If some elements exist just for DOM methods to handle them, then using DOM methods to create them is the most appropriate choice.

Javascript DOM Programming Art--seventh chapter dynamic creation of tags