Home > Article > Web Front-end > Summary of method examples of dynamically creating html tags in javascript

Summary of method examples of dynamically creating html tags in javascript

伊谢尔伦Original: 2017-07-27 10:56:521521browse

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

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);
 }

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!

Statement：

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

Previous article：Detailed explanation of the basic pattern usage and improvement methods of JavaScript prototypal inheritance with examplesNext article：Detailed explanation of the basic pattern usage and improvement methods of JavaScript prototypal inheritance with examples

See more

Summary of method examples of dynamically creating html tags in javascript

Related articles