A special case that innerHTML is executing under Mozilla Firefox and Opera. _javascript Tips

Source: Internet
Author: User
Tags tagname
is in the CSDN forum to see a problem, usually I did not notice, or said no such use. Look at the code

<body id= "www.never-online.net" > <script> var foo = function () {var $ = function () {return document . getElementById (Arguments[0]); $ ("D2"). InnerHTML = $ ("D1"). InnerHTML; //]]> </script> <p> Change the values in the two text boxes, assign the innerHTML of this container to d2</p> <button onclick= "foo ()" > Foo () </button> <div id= "D1" > <input value= ' blog.never-online '/> <input ' value= ' "/> ;/div> <div id= "D2" > </div> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]


It's not the expected outcome, is it? including in opera under the implementation of the same as Firefox under the same, you can try to run under opera will understand.

What if we could get the results we expected? I tried to get all the innerHTML in Mozilla under the __definegetter__ method, but it gave me some hints. Like what:
<textarea id="runcode32146"><script type= "Text/javascript" > Function Elementdetail (e) {if (!e.attributes) return ""; var attrs = e.attributes; var str = "<" + e.tagname; for (var i=0 i<attrs.length; i++) {str = ' +attrs[i].name+ ' = ' +attrs[i].value+ ' '; }; STR + + ">"; return str; function foo () {var a = document.getElementById ("D1"); var str = ""; for (var i=0 i<a.childnodes.length; i++) {var chld = a.childnodes[i]; str = Elementdetail (CHLD); alert (str); </script> <p> Change the values in the two text boxes, assign the innerHTML of this container to d2</p> <button onclick= "foo ()" >foo () </but ton> <div id= "D1" > <input value= ' blog.never-online '/> <input "script by value=" Never-online </div> <div id= "D2" > </div></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Although the above code does not achieve the intended purpose, but is to know that must get the value of attribute, so I try to use the following method to do.
<script type= "Text/javascript" > var $ = function (ID) {return document.getElementById (ID);} function foo () {$ ("D2"). InnerHTML = $ ("D1"). InnerHTML; </script> <p> Change the values in the two text boxes, assign the innerHTML of this container to d2</p> <button onclick= "foo ()" >foo () </ button> <div id= "D1" > <input value= ' blog.never-online ' onkeyup= ' This.setattribute (' value ', This.value) " > <input value= "script by Never-online"/> </div> <div id= "D2" ></div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

This method is successful, it can be explained that under the Mozilla innerHTML by traversing the elements of all nodes of the tagname and attrubutes to get its innerhtml. Therefore, the innerHTML in our first example does not get the changed value.

At the same time, opera can also be used under this trick. It is also proved that the innerHTML in opera also obtains its innerhtml by traversing the tagname of all nodes of the element and attrubutes.

Is this the standard in the consortium? There is no time to check the information of the world's data, so it is not the coincidence of opera and Mozilla, or IE below to make developers comfortable design.

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.