js---html元素操作
生活随笔
收集整理的這篇文章主要介紹了
js---html元素操作
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
思路：創(chuàng)給節(jié)點添加一個元素：步驟：
1：創(chuàng)建元素節(jié)點
2：創(chuàng)建文本節(jié)點
3：將該文本添加到元素上
4：將該元素追加到其他元素上
appendChild() 方法，將新元素作為父元素的最后一個子元素進(jìn)行添加，如需不想作為最后一個添加，則可使用 insertBefore() 方法。如下代碼：
1 <div id="div1"> 2 <p id="p1">This is a paragraph.</p> 3 <p id="p2">This is another paragraph.</p> 4 </div> 5 6 <script> 7 var para=document.createElement("p"); 8 var node=document.createTextNode("This is new."); 9 para.appendChild(node); 11 var element=document.getElementById("div1"); 12 var child=document.getElementById("p1"); 13 element.insertBefore(para,child); 14 </script>?
?
修改 HTML = 改變元素、屬性、樣式和事件。
修改 HTML 元素
修改 HTML DOM 意味著許多不同的方面：
- 改變 HTML 內(nèi)容
- 改變 CSS 樣式
- 改變 HTML 屬性
- 創(chuàng)建新的 HTML 元素
- 刪除已有的 HTML 元素
- 改變事件（處理程序）
在接下來的章節(jié)，我們會深入學(xué)習(xí)修改 HTML DOM 的常用方法。
創(chuàng)建 HTML 內(nèi)容
改變元素內(nèi)容的最簡答的方法是使用 innerHTML 屬性。
下面的例子改變一個 <p> 元素的 HTML 內(nèi)容：
實例
<html> <body><p id="p1">Hello World!</p><script> document.getElementById("p1").innerHTML="New text!"; </script></body> </html>?
提示：我們將在下面的章節(jié)為您解釋例子中的細(xì)節(jié)。
改變 HTML 樣式
通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象。
下面的例子改變一個段落的 HTML 樣式：
實例
<html><body> <p id="p2">Hello world!</p><script> document.getElementById("p2").style.color="blue"; </script></body> </html>?
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點），然后把它追加到已有的元素上。
實例
<div id="d1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var element=document.getElementById("d1"); element.appendChild(para); </script>?
轉(zhuǎn)載于:https://www.cnblogs.com/m-xy/p/3421097.html
總結(jié)
以上是生活随笔為你收集整理的js---html元素操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： shell脚本修复MySQL主从同步
- 下一篇： C# Enum,Int,String的互