使用属性创建自定义HTML元素

Question

我知道如何在JS中创建自定义HTML标记。但是，如果我希望它具有某些属性呢？例如：

<custom-tag text="Foo and Bar"></custom-tag>

应显示为：

<section>Foo and Bar</section>

这样做最干净的方法是什么？我知道如果我遍历JS中的所有自定义标记元素，它必须工作。但我确信这一定是更好的方式......

Answer 1

使用框架

您可以使用AngularJS。该框架支持此功能。

使用jQuery的其他选项如下：

HTML：

<custom-tag text="Foo and Bar"></custom-tag>

使用Javascript：

var text = $('custom-tag').attr('text');
$('custom-tag').replaceWith('<section>'+text+'</section>');

演示：http://codepen.io/ces/pen/EjpONy

Vanilla Javascript

var element = document.getElementsByTagName('custom-tag')[0];
var attr = element.getAttribute('text');

var section = document.createElement('section');
section.innerHTML = element.innerHTML;

element.parentNode.insertBefore(section, element);
element.parentNode.removeChild(element);
section.innerHTML = attr;

演示：http://codepen.io/ces/pen/bdjQqO