javascript動態建立html標記的方法實例總結
HTML的事件屬性
全域事件屬性:HTML 4 增加了使事件在瀏覽器中觸發動作的能力,例如當使用者點擊元素時啟動 JavaScript。
a. Window 事件屬性,針對 window 物件觸發的事件(套用到
標籤),常用的為onload。b. Form事件,由 HTML 表單內的動作觸發的事件(應用到幾乎所有 HTML 元素,但最常用在 form 元素中):常用的為onblur、onfocus、onselect、onsubmit。
c. keybord事件
d.Mouse事件,滑鼠或類似使用者動作觸發的事件:常用的為onclick、onmouseover、onmouseout。
e. Media事件,由媒介(如視訊、影像和音訊)觸發的事件(適用於所有HTML 元素,但常見於媒介元素中,例如
動態建立html標記
<!DOCTYPE html> <html> <head> <meta chaset="utf-8" /> <title>document.write</title> <body> <script> <!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则--> document.write("<p>This is inserted by document.write</p>"); </script> </body> </head> </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。
## 很有用的屬性:element.parentNode(取得父節點)、element.nextSibling(取得兄弟節點)
上面用innerHTML屬性插入HTML的效果用dom方法可以實現:
window.onload = function() { var testp = document.getElementById("testp"); var para = document.createElement("p"); testp.appendChild(para); var context1 = doument.createTextNode("This is inserted by "); para.appendChild(context1); var emphasis = document.createElement("em"); para.appendChild(emphasis); var context2 = document.createTextNode("method of domcore"); emphasis.appendChild(context2); }
function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { targetElement.inserBefore(newElement, targetElement.nextSibling); } }
以上是javascript動態建立html標記的方法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
