Differences between createelement, write, and innerhtml

My blog has moved to my site.
Site Link
RSS

When dealing with cascading menus in the previous article, I found an interesting phenomenon, using createelement/innerhtml/document. the write performance is different. I tested it myself.
1. createelement
Createelement generates a dynamic object. After the object is created, it is a non-primary object and is not added to the document to which it is created. You need to use appendchild or insertbefore to insert it into the document Dom model for the object to take effect.
The createelement function is attached to a document object. When using frame, IFRAME, or popupwindow, you must note that the object created by a document cannot be directly copied to another document, therefore, when creating an object, you must stand up and do not add it to an object.
Createelement can be used in two ways. The first method is most commonly used. You can directly enter the name of a tag for creation (Case Insensitive), such as document. createelement ("A"), the object created in this way is an empty shell, and you need to fill in the attributes by yourself. Another method is to use a script, such as document. createelement ("<a href = 'www .sina.com '>"). In this way, attributes are brought into the object. Note that no matter how you create them, the createelement function of document only creates single-layer objects and does not create nested objects, such as the script document. createelement ("<div> <A/> </div>") only creates the outer Div object and does not create a. Similarly, in the DOM model, text exists as a special node, and the instance script document. createelement ("<div> ssss </div>") does not create a text node "Sss". That is to say, after the node is created, it is still a bald Div.

2. Write
This function is a bit interesting. Let's take a look at the official instructions of IE:

You shoshould not use the write or writeln methods on the current document after the document has finished loading unless you first call the open method, which clears the current document's window and erases all variables.

This function writes text information to the current HTML location during initialization (when the document is not finally generated; however, when this function is called after initialization, all the current document information will be cleared to check the instance.

<B> outtertext </B> <br/>
<SCRIPT>
Document. Write ("document. Write: Before init ");
</SCRIPT>
<B> innertext </B> <br/>

At this time, all the three paragraphs of text can be normally displayed. There is no problem, but we will try to call

<B> outtertext </B> <br/>
<SCRIPT>
Document. Write ("document. Write: Before init ");
</SCRIPT>
<B> innertext </B> <br/>
<SCRIPT defer>
Document. Write ("document. Write: After init ");
</SCRIPT>

At this point, only the text after init is displayed. As described in this document, using the open function can avoid Completely replacing the HTML content. As a result, I tried it many times, but it was not possible to refresh the current page frequently, this will not be tested.
What I care about is the performance of document when writing CSS and JavaScript.
The first test is to write JavaScript to see if it can take effect in real time. An error is reported using the following script because the parsing mechanism of JavaScript is faulty.

<B> outtertext </B> <br/>
<SCRIPT>
Document. Write ("<SCRIPT> alert ('aaa') </SCRIPT> ");
</SCRIPT>
<B> innertext </B> <br/>

I had to change the road again.

<B> outtertext </B> <br/>
<SCRIPT>
Document. Write ("& lt; script & gt; alert ('aaa') & lt;/script & gt ;");
</SCRIPT>
<B> innertext </B> <br/>

Unfortunately, what is displayed directly is
<SCRIPT> alert ('aaa') </SCRIPT>
That is to say, the write script in the document is directly processed as text. What about CSS?

<SCRIPT>
Document. Write ("<style> A {color: red; font-weight: bold ;}</style> ");
</SCRIPT>
<A href = 'javascript: void (0) '> This Is A anchor! </A>

A wonderful thing happened. At this time, the CSS style actually worked.
I also want to test whether the behavior in popwindow is consistent with that in a common document.

<SCRIPT>
Function testfun ()
{
VaR win = Window. createpopup ();
Win.doc ument. Write ("& lt; script & gt; function FX () {alert () ;}& lt;/script & gt ;");
Win.doc ument. Write ("<a href = ''onclick = 'fx (); Return false'> This Is A anchor </a> ");
Win. Show (0, 0, 100,100 );
}
</SCRIPT>
<Button onclick = "testfun ()"> click even </button>

No! <SCRIPT> cannot be generated in a new window. CSS can also be written successfully.

3. innerhtml

The role of this attribute does not need to be clearly stated, or the test can write JavaScript and CSS.

<SCRIPT>
Function testfun ()
{
VaR x = Document. getelementbyid ("Dix ");
X. innerhtml = "<style> A {color: red; font-weight: bold ;}</style>" +
"<A href = ''onclick = 'fx (); Return false'> This Is A anchor </a> ";
}
</SCRIPT>
<Div id = "Dix">
</Div>
<Button onclick = "testfun ()"> click even </button>

Unfortunately, CSS does not take effect. Similarly, the Javascript page does not take effect.

Tests show that CSS writing must use the write method or the DOM object construction method directly. Javascript dynamic addition can only use eval or dynamic DOM object construction, which is not an easy task.

4. Document. createelement ("script ")
The content of atest. js under drive C is very simple.

Alert ("successful bird loading ");
Function FX ()
{
Alert ("processing click events ");
}

The test script is as follows:

<SCRIPT>
Function testfun ()
{
VaR win = Window. createpopup ();
VaR x=win.doc ument. createelement ("script ");
X. src = "C: \ atest. js ";
Win.doc ument. Body. appendchild (X );
Win.doc ument. Write ("<button onclick = 'fx () '> This Is A anchor </button> ");
Win. Show (0, 0, 100,100 );

}
</SCRIPT>
<Div id = "Dix">
</Div>
<Button onclick = "testfun ()"> click even </button>
<Button onclick = 'fx () '> This Is A anchor </button>

After the code above is run, click "try again". the atest will be loaded to a new window and the message "successful bird loading" will pop up, then, click the button in the pop-up window to bring up "processing click events". In fact, the message "successfully loaded birds" is displayed normally, but the event processing message is not displayed, no matter whether you click in the home page or in the pop-up window, it is a bit depressing!