Home > Article > Web Front-end > Summary of method examples of dynamically creating html tags in javascript
HTML event attributes
Global event attributes: HTML 4 adds the ability for events to trigger actions in the browser, such as starting JavaScript when the user clicks on an element.
a. Window event attribute, for events triggered by the window object (applied to the 6c04bd5ca3fcae76e30b72ad730ca86d tag), the commonly used one is onload.
b. Form event, an event triggered by actions within an HTML form (applied to almost all HTML elements, but most commonly used in form elements): commonly used ones are onblur, onfocus, onselect, and onsubmit.
c. keybord event
d.Mouse event, an event triggered by mouse or similar user actions: commonly used ones are onclick, onmouseover, and onmouseout.
e. Media event, an event triggered by media (such as video, image and audio) (applicable to all HTML elements, but commonly found in media elements, such as b97864c2e0ef2353a16c4d64c7734e92, d8e2720730be5ddc9c2a3782839e8eb6, < ;img>, 273238ce9338fbb04bee6997e5552b95 and 39000f942b2545a5315c57fa3276f220).
Dynamically create html tags
a. Two traditional methods
document.write method and innerHTML attribute, neither of which are The methods and attributes supported by the standardized DOM (W3C standard) are all exclusive attributes of HTML.
The document.write method can easily insert element tags, especially strings. But it goes against the principle that web design should separate behavior (script) and structure (html tags).
<!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>
innerHTML is suitable for inserting a large piece of HTML content into a web page, such as:
##
<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. A more refined dom method - get the dom node tree and change the dom node tree
Retrieve nodes (elements): document.getElementById and element.getElementsByTagName
Create nodes (elements): document.createElement,document.createTextNode
Append node (element): element.appendChild
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); }Use the above dom method to write a function that inserts one node after another node:
function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { targetElement.inserBefore(newElement, targetElement.nextSibling); } }
The above is the detailed content of Summary of method examples of dynamically creating html tags in javascript. For more information, please follow other related articles on the PHP Chinese website!