如何为html创建自定义标签 [英] How to create custom tags for html

问题描述

我想了解如何为html创建自定义标签，并提供特殊的属性和行为，如果有人能够给出建议，我会非常感激。

解决方案

HTML5Rocks.com提供了一篇有趣且深入的文章，介绍如何使用自定义元素：自定义元素：在HTML中定义新元素

实例化元素

创建常见的技巧元素仍然适用于自定义元素。与任何标准元素一样，它们可以使用JavaScript在HTML中声明或在DOM中创建。
实例化自定义标签

声明它们：
$ b

 < X-FOO>< / X-FOO> 
  

在JS中创建DOM：

  var xFoo = document.createElement（'x-foo'）; 
 xFoo.addEventListener（'click'，function（e）{
 alert（'Thanks！'）; 
}）; 
  

使用新运算符：

  var xFoo = new XFoo（）; 
 document.body.appendChild（xFoo）; 
  

I'd like to learn how to create custom tags for html, with special attributes and behavior, if someone can give advice I'd be the most grateful.

解决方案

There's an interesting and in depth article from HTML5Rocks.com on how to work with custom elements : Custom Elements: Defining New Elements in HTML

Here's an excerpt from the article on how to do it.

Instantiating elements

The common techniques of creating elements still apply to custom elements. As with any standard element, they can be declared in HTML or created in DOM using JavaScript. Instantiating custom tags

Declare them:

<x-foo></x-foo>

Create DOM in JS:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

Use the new operator:

var xFoo = new XFoo();
document.body.appendChild(xFoo);

这篇关于如何为html创建自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！