javascript動態創建html標記的方法實例總結

來源：懂視網責編：小采時間：2020-11-27 20:15:00

javascript動態創建html標記的方法實例總結

javascript動態創建html標記的方法實例總結:HTML的事件屬性全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發動作的能力，比如當用戶點擊元素時啟動 JavaScript。 a. Window 事件屬性，針對 window 對象觸發的事件（應用到 <body> 標簽），常用的為onload。 b. Form事件，由 HTM

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript動態創建html標記的方法實例總結:HTML的事件屬性全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發動作的能力，比如當用戶點擊元素時啟動 JavaScript。 a. Window 事件屬性，針對 window 對象觸發的事件（應用到 <body> 標簽），常用的為onload。 b. Form事件，由 HTM

HTML的事件屬性

全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發動作的能力，比如當用戶點擊元素時啟動 JavaScript。

a. Window 事件屬性，針對 window 對象觸發的事件（應用到 <body> 標簽），常用的為onload。

b. Form事件，由 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：常用的為onblur、onfocus、onselect、onsubmit。

c. keybord事件

d.Mouse事件，由鼠標或類似用戶動作觸發的事件：常用的為onclick、onmouseover、onmouseout。

e. Media事件，由媒介（比如視頻、圖像和音頻）觸發的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）。

動態創建html標記

a. 兩個傳統的方法

document.write方法和innerHTML屬性，兩者都不是標準化的DOM(W3C標準)所支持的方法和屬性，它們都是html的專有屬性。

document.write方法可以很方便的插入元素標簽，尤其是字符串。但是它與網頁設計應將行為(腳本)和結構(html標簽)分離的原則相背。

innerHTML適合將一大段HTML內容插入網頁,如:

<p id="testp">
 </p>
 window.onload = function() {
 var testp = document.getElementById("testp");
 testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
 }

b. 更加精細化的dom方法-獲取dom節點樹和改變dom節點樹

檢索節點（元素）:document.getElementById和element.getElementsByTagName

創建節點（元素）:document.createElement,document.createTextNode

追加節點（元素）:element.appendChild

插入(將一個節點插入到另一個節點之前):parentEelement.insertBefore(newElement, targetElement)

很有用的屬性：element.parentNode（獲取父節點）、element.nextSibling（獲取兄弟節點）

上面用innerHTML屬性插入HTML的效果用dom方法照樣可以實現:

利用上面的dom方法寫一個將一個節點插入到另一個節點之后的函數：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com