使用属性创建自定义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

香草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