Just learned the operation methods and properties of the DOM node tree, while trying to write a not manually set the ID and double-click the event example, toss the n long time finally made a touch of the sample, the code is as follows: (Note: Double-click the code in the text box, right click to copy the code, save as *.htm file can be tested)
<ptml> <pead><title>textarea Run Box effect </title> <style>textarea {width:100%;height:200px; font-family: "Fixedsys"; overflow-y:hidden;} </style> <script>/********************************************************************************* *copyright (C) ymk18@163.com qq:334150781 URL http:// Hi.baidu.com/ymk18 Welcome to Exchange Common learning to explore common progress 2009-05-04 PM 19:17 *********************************************************** /window.onload = function () {// Bind this function to the OnLoad event var textarea = document.getElementsByTagName ("textarea"); Put all textarea elements in the array variable textarea for (Var i=0;i<textarea.length;i++) {//traverse the array variable textarea textarea[i].setattribute (" ID ", i); Set the id attribute of each textarea element textarea[i].style.posheight = textarea[i].scrollheight; Resetting the height value makes the TEXTAREA element highly adaptive, important style height:200px; Textarea[i].ondblclick = function () {//Custom mouse double click event RunCode (this.id);Use the Run code function} Textarea[i].oncontextmenu = function () {//To customize the mouse right-click event This.select ();//Right-click the text selection effect in the object Copycode (this.id);//Call replication The code function return false; Block browser default Behavior}}//Run code function RunCode (getId) {var Code=document.getelementbyid (getId). Firstchild.nodevalue; if (code!= "") {var newwin=window.open (', ', ', '); Newwin.opener = null newwin.document.write (code); Newwin.document.close (); }///Copy Code function Copycode (getId) {var Text=document.getelementbyid (getId). Firstchild.nodevalue; Window.clipboardData.setData ("text", text); Alert ("Content has been copied to the Clipboard!") "); //Save Code Function Savecode (getId) {var Code=document.getelementbyid (getId). Firstchild.nodevalue; var winname = window.open (', ' _blank ', ' top=10000 '); Winname.document.open (' text/html ', ' replace '); Winname.document.writeln (code); Winname.document.execCommand (' SaveAs ', ', ', ' code.htm '); Winname.close (); {</script> </pead> <body> <textarea> <!--code instance--> <script> var para = document. createelement ("P"); Creates a P-element node and assigns it to the Para variable alert (para.nodename); Displays the name of the element node, alert (Para.nodetype); NodeType value is 1-> element node;2-> attribute node;3-> text node </script> <!--code instance--> </textarea> <textarea > <!--code instance--> <div id= "Testdiv" > </div> <script> window.onload = function () {var para = Document.createelement ("P"); var txt1 = document.createTextNode ("I inserted"); Para.appendchild (TXT1); var emphasis = document.createelement ("em"); var txt2 = document.createTextNode ("this"); Emphasis.appendchild (TXT2); Para.appendchild (emphasis); var txt3 = document.createTextNode ("content."); Para.appendchild (TXT3); var testdiv = document.getElementById ("Testdiv"); Testdiv.appendchild (para); } </script> <!--code instance--> </textarea> <textarea> <!--code instance--> <div id= "Testdiv" > </div> <script> window.onload = function () {var para = document.createelement ("P"); var txt1 = Document.createteXtnode ("I inserted"); var emphasis = document.createelement ("em"); var txt2 = document.createTextNode ("this"); var txt3 = document.createTextNode ("content."); Para.appendchild (TXT1); Emphasis.appendchild (TXT2); Para.appendchild (emphasis); Para.appendchild (TXT3); var testdiv = document.getElementById ("Testdiv"); Testdiv.appendchild (para); } </script> <!--code instance--> </textarea> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]