Summary of method examples of dynamically creating html tags in javascript-JS Tutorial-php.cn

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 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 , , &lt ;img>, and ).

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).

document.write document.write(" This is inserted by document.write

"); Copy after login innerHTML is suitable for inserting a large piece of HTML content into a web page, such as:

##

window.onload = function() { var testp = document.getElementById("testp"); testp.innerHTML = " This is inserted by innerHTML

"; } Copy after login

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

Insert (insert a node before another node): parentEelement.insertBefore(newElement, targetElement)

Very useful attributes: element.parentNode (get the parent node), element.nextSibling (get the sibling node)

The effect of inserting HTML using the innerHTML attribute above can still be achieved using the dom method:

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); } Copy after login

Use the above dom method to write a function that inserts one node after another node: