createElement()

createElement() 創建元素

<pre><b>createElement() 創建元素</b> document.createElement() 創建一個元素。 例 : document.createElement("div") document.createElement("P") document.createElement("input") .......等等 document.createElement() 可以建立一個新的元素。 document.createTextNode() 就是用來建立文字節點的方法。 document.createDocumentFragment() 一開始我們有一個 HTML 的容器元素。 Node.appendChild() 方法在節點的子節點<r>列表末</r>新增新的子節點。 Node.insertBefore() 方法在節點的子節點列表任意位置<r>插入</r>新的節點。 Node.removeChild() 方法從 DOM 移除一個子節點，並返回<r>移除</r>的節點。 Node.replaceChild() 實現子節點(對像)的替換。返回被<r>替換</r>對像的引用。 Node.hasChildNodes() 取得值，指出這個節點<r>是否有子節點</r>。 </pre> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.appendChild( )</b> <pre> <<c>script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); <r>document.body</r>.appendChild(newDiv, div1); } </script></pre> <button onclick="myFunction()">Node.appendChild()</button> <div id="div1" >id="div1"</div> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); document.body.appendChild(newDiv, div1); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.appendChild( )</b> <pre> <<c>script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); <r>div1</r>.appendChild(newDiv, div1); } </script></pre> <button onclick="myFunction()">Node.appendChild()</button> <div id="div1" ><<c>div id="<r>div1</r>"><<c>/div></div> <div id="div2" ><<c>div id="div2"><<c>/div></div> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); div1.appendChild(newDiv, div1); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.insertBefore()</b> <pre><<c>ul id="myList"> <<c>li>Coffee<<c>/li> <<c>li>Tea<<c>/li> <<c>/ul> <<c>script> function myFunction() { var newNode = document.createElement("li"); var textNode = document.createTextNode("Water"); newNode.appendChild(textNode); myList.insertBefore(newNode, myList.children[1]); } <<c>/script></pre> <button onclick="myFunction()">insertBefore()</button> <ul id="myList"> <li>Coffee</li> <li>Tea</li> </ul> <script> function myFunction() { var newNode = document.createElement("li"); var textNode = document.createTextNode("Water"); newNode.appendChild(textNode); myList.insertBefore(newNode, myList.children[1]); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.removeChild() </b> <pre> <<c>input type="button" value="1 remove me" onclick="updateList(this)"> <<c>input type="button" value="2 remove me" onclick="updateList(this)"> <<c>input type="button" value="3 remove me" onclick="updateList(this)"> <<c>input type="button" value="4 remove me" onclick="updateList(this)"> <<c>input type="button" value="5 remove me" onclick="updateList(this)"> <<c>script> function remove(x) { document.body.removeChild(x) } <<c>/script></pre> <input type="button" value="1 remove me" onclick="remove(this)"> <input type="button" value="2 remove me" onclick="remove(this)"> <input type="button" value="3 remove me" onclick="remove(this)"> <input type="button" value="4 remove me" onclick="remove(this)"> <input type="button" value="5 remove me" onclick="remove(this)"> <script> function remove(x) { document.body.removeChild(x) } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

Edit

#html #網頁格式 #style #div #createElement() 創建元素 #Node.removeChild() #Node.insertBefore() #Node.appendChild( ) #createElement()

parentElement children

children 子元素 / parentElement 父元素

<pre><b>nodeObject.children 子元素</b> <<c>div id="Mdiv"> <<c>div> 111 <<c>/div> <<c>a> 222 <<c>/a> <<c>h1> 333 <<c>/h1> <<c>p> 444 <<c>/p> <<c>/div> <div id="dp"></div> </pre> <div id="Mdiv"> <div>111</div> <a>222</a> <h1>333</h1> <p>444</p> </div> <script> var txt="" ; txt += "Mdiv.children.length = " + Mdiv.children.length ; txt += "<br>" ; txt += "<br>Mdiv.children[0].nodeName= " + Mdiv.children[0].nodeName; txt += "<br>Mdiv.children[1].nodeName= " + Mdiv.children[1].nodeName; txt += "<br>Mdiv.children[2].nodeName= " + Mdiv.children[2].nodeName; txt += "<br>Mdiv.children[3].nodeName= " + Mdiv.children[3].nodeName; txt += "<br>" ; txt += "<br>Mdiv.children[0].innerHTML= " + Mdiv.children[0].innerHTML ; txt += "<br>Mdiv.children[1].innerHTML= " + Mdiv.children[1].innerHTML ; txt += "<br>Mdiv.children[2].innerHTML= " + Mdiv.children[2].innerHTML ; txt += "<br>Mdiv.children[3].innerHTML= " + Mdiv.children[3].innerHTML ; dp.innerHTML =txt; </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>nodeObject.parentElement 父元素</b> <<c>div id="Mdiv"> <<c>div id="div"> 111 <<c>a id="a"> 222 <<c>/a> <<c>h1 id="h1"> 333 <<c>/h1> <<c>/div> <<c>p id="P"> 444 <<c>/p> <<c>/div> <div id="dp"></div> </pre> <div id="Mdiv"> <div id="div"> 111 <a id="a"> 222 </a> <h1 id="h1"> 333 </h1> </div> <p id="p"> 444 </p> </div> <script> var txt="" ; txt += "<br>p.parentElement.id = "+ p.parentElement.id ; txt += "<br>h1.parentElement.id = "+ h1.parentElement.id ; txt += "<br>a.parentElement.id = "+ a.parentElement.id ; txt += "<br>div.parentElement.id = "+ div.parentElement.id ; txt += "<br>a.parentElement.parentElement.id = "+ a.parentElement.parentElement.id ; dp.innerHTML =txt; </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

Edit

#html #網頁格式 #style #div #script parentElement #script children #script parentElement 父元素 #script children 子元素 #script nodeObject.parentElement #script nodeObject.children

blur focus

focus() / blur()

<pre><b>聚焦：element.focus()獲得焦點 element.blur()失去焦點 </b> <<c>input type="type" value="⇦ blur" onmouseout = "this.blur(); this.value= '⇦ blur'" onmouseover = "this.focus();this.value= '⇦ focus'" /> <<c>style> input:focus {background-color: yellow } input {background-color: lime } <<c>/style> </pre> <input type="type" value="⇦ blur" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" /> <style> input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>jquery focus()</b> <pre> <<c>input type="type" value="⇦ blur" /> <<c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"><<c>/script> <<c>script> $(document).ready(function(){ $("input").mouseover(function(){ $("input").focus(); $("input").val("focus"); }); $("input").mouseout(function() { $("input").blur(); $("input").val("blur"); }); }); <<c>/script> </pre> <input type="type" value="⇦ blur" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").mouseover(function(){ $("input").focus(); $("input").val("focus"); }); $("input").mouseout(function() { $("input").blur(); $("input").val("blur"); }); }); </script> <style> input:focus {background-color: yellow } input {background-color: lime } </style> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } </style>

00

Edit

#html #網頁格式 #style #div #script focus() #script blur() #script 獲得焦點 #script 失去焦點