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 , , < ;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).
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
Copy after login
innerHTML is suitable for inserting a large piece of HTML content into a web page, such as:
1
2
3
4
5
6
<p id="testp">
</p>
window.onload = function() {
var testp = document.getElementById("testp");
testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
}
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
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:
1
2
3
4
5
6
7
8
9
10
11
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:
1
2
3
4
5
6
7
8
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
targetElement.inserBefore(newElement, targetElement.nextSibling);
}
}
Copy after login
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!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
See all articles
Web Front-end
