Home > Developer > JavaScript
The document.write () method can easily and quickly insert a string into a document.
Please save the following tag code as a file, the file name will be used test.html good.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8" /> <title>Test</title></Head><Body> <Script>document.write ("<p>this is ainserted.</p>"); </Script></Body></HTML>
If you load the test.html file into a Web browser, you will see the content "This is ainserted." Paragraphs of text.
The biggest disadvantage of document.write is that it violates the principle that "behavior should be separated from performance". Even if you move the document.write statement to an external function, you still need to use the <script> tag in the <body> section of the tag to invoke that function.
It's a bad idea to mix JavaScript and HTML code together. Such marks are neither easy to read and edit, nor enjoy the benefits of separating behavior from structure.
The mine type Application/xhtml+xml is incompatible with document.write, and the browser does not execute the Document.Write method at all when rendering this XHTML document.
In a sense, using the Document.Write method is a bit like using the <font> tag to set the font and color. Although both techniques work well in HTML documents, they are not elegant enough.
It is always a good idea to separate structure, behavior and style. Whenever possible, you should use an external CSS file instead of the <font> tag to set and manage the style information of the Web page, and use an external JavaScript file to control the behavior of the page. Avoid using <script> tags in the <body> section to avoid document.write methods.
innerHTML PropertyToday's browsers support the innerHTML property, which is not part of the Web Dom standard, but is now included in the HTML5 specification. It started in Microsoft's IE 4 browser and was gradually accepted by other browsers.
The innerHTML property can be used to read and write HTML content in a given element. Not only can you use it to read the HTML content of an element, but you can also use it to write HTML content to an element.
However, this technique is not used to differentiate between "inserting a piece of HTML content" and "replacing a piece of HTML content." There is no HTML content in the element, and once you use the innerHTML property, its entire contents will be replaced.
The innerHTML property allows you to accomplish this task quickly and easily when you need to insert a large piece of HTML content into a document. However, the innerHTML property does not return any references to the content that was just inserted. If you want to work with what you just inserted, you need to use the exact methods and properties provided by the DOM.
Similar to the Document.Write method, the innerHTML property is also an HTML-specific property and cannot be used in any other markup language document. The browser ignores the innerHTML attribute directly when rendering an authentic XHTML document (that is, the mine type makes Application/xhtml+xml an XHTML document).
At any time, the standard DOM can be used instead of innerHTML. While this often requires writing more code to get the same results, the DOM also provides higher accuracy and more powerful functionality.
Dom Method CreateElement methodEdit test.html File:
<div id= "Testdiv" >
</div>
I want to insert a text into the testdiv element. In the DOM language, you want to add a P element node and use that node as a sub-node of the DIV element node. (The DIV element already has a child node, which is an id attribute node with a value of teatdiv).
This task requires a total of two steps to complete:
(1) Create a new element;
(2) Insert this new element into the node tree.
The first step is done using Dom method createelement:
Document.createelement ("P");
The method itself does not affect the performance of the page, but it also needs to insert the newly created element into the document. To do this you need to have something to refer to this newly created node. Although this newly created p already exists, it's not part of any DOM node tree, it's just an orphan wandering around the JavaScript world. However, it already has its own dom properties like any other node.
This homeless P element now has a NodeType value of 1 and a nodename attribute that takes a value of P.
AppendChild methodInserts the newly created node into the node tree of a document.
createTextNode methodYou have now created an element node and inserted it into the document's node tree, which is a blank P element. You want to put some text in this P element, but the CreateElement method is not helpful, it can only create element nodes. You need to create a text node that you can implement with the createTextNode method. createTextNode syntax is similar to createelement, see the routines:
function () { var para = document.createelement ("P"); var testdiv = document.getElementById ("Testdiv"); Testdiv.appendchild (para); var txt = document.createelement ("Hello World"); Para.appendchild (TXT);}The DOM provides a method named InsertBefore () that inserts a new element in front of an existing element. The following is the invocation syntax for this method:
Parentelement.insertbefore (newelement,targetelement)
We don't have to figure out exactly which parent element is, because Targetelement's ParentNode property value is it. In the DOM, the parent element of the element node must be another element node (attribute nodes and child elements of the text node are not allowed to be element nodes).
Inserts a new element after the existing elementThe DOM does not provide a InsertAfter () method.
Writing InsertAfter functionsfunction InsertAfter (newelement, targetelement) { var parent = Targetelement.parentnode; if (Parent.lastchild = = targetelement) { parent.appendchild (newelement); } Else { Parent.insertbefore (newelement, targetelement.nextsibling); }}The steps of this function are parsed:
First, this function has two parameters: one is the new element that is about to be inserted newelement, and the other is the target element targetelement;
Then, the ParentNode attribute value of the target element is saved to the variable parent;
Next, check that the target element is not the last child element of the parent, that is, whether there is a "= =" Relationship between the LastChild attribute value of the parent element and the target element;
If so, the new element is appended to the parent element using the AppendChild method, so that the new element is inserted right after the target element;
If not, use the InsertBefore method to insert the new element before the next sibling element of the target element.
Similar to the Addloadevent function that appears in chapter 6th, the InsertAfter function is also very useful and should be included in your script.
AjaxIn 2005, Adaptive Path's Jesse James Garrett invented the word Ajax, which summarizes the techniques for loading page content asynchronously.
With Ajax, you can only update a small part of the page. Other content-logo, navigation, head, foot, no reload.
The main advantage of Ajax is that requests to the page are sent asynchronously to the server. The server does not respond to the request with the entire page, it processes the request in the background, while the user continues to browse the page and interact with the page. Your script can load and create page content on demand without interrupting the user's browsing experience.
Like any new technology, Ajax has its own scope of application. It relies on JavaScript, so there may be browsers that don't support it, and the search engine's spider program won't crawl the content.
XMLHttpRequest ObjectThe core of Ajax technology is the XMLHttpRequest object. This object acts as an intermediary between the script (client) and the server in the browser. Past requests are made by the browser, and JavaScript can send requests on its own and handle the response itself. "Not specifically introduced, because there is no specific contact with Ajax, and so on to learn Ajax time to write reading notes it ..." 】
<!--
Fiber Sharp
Source: http://www.cnblogs.com/beginner2014/p/4175489.html
This article is copyrighted by the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link. Thank you for your cooperation.
-
JavaScript DOM Programming Art (2nd edition) reading notes (7)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
