创建包含预定结构的新标签

Create new tag involving predetermined structure

本文关键字：标签 新标签 包含预 结构 创建      更新时间：2024-03-04

在处理HTML时，我不得不多次使用如下结构：

<div class="class1"><p class="class2">Title</p><div class="class3">
    Content
</div></div>

并且该结构是重复的并且也是嵌套的。因此，能够定义类型的东西对我来说将非常有帮助

<newtag tit="Title">Content</newtag>

也就是说：而不是有代码

<div class="class1"><p class="class2">External box</p><div class="class3">
    <div class="class1"><p class="class2">Medium box</p><div class="class3">
        <div class="class1"><p class="class2">Inner box</p><div class="class3">
            <p>Something</p>
        </div></div>
    </div></div>
    <div class="class1"><p class="class2">Another medium box</p><div class="class3">
        <p>Something else</p>
    </div></div>
</div></div>

我想要

<!--some previous code (perhaps in html, css or js)-->
<newtag tit="External box">
    <newtag tit="Medium box">
        <newtag tit="Inner box">
             <p>Something</p>
        </newtag>
    </newtag>
    <newtag tit="Another medium box">
        <p>Something else</p>
    </newtag>
</newtag>

我想肯定有这样的东西，但我真的不知道该怎么做。有什么方法可以实现以前的结构吗也就是说，"一些以前的代码"应该是什么

欢迎提出任何建议。

是的，您可以使用这样的自定义元素：http://jsfiddle.net/6aj7gjaw/另请阅读：http://www.html5rocks.com/en/tutorials/webcomponents/customelements/基本上：对于浏览器来说，短划线是区分自定义元素和内置元素的关键。无论如何，请注意，并非所有浏览器都支持此功能。

<my-header>Hello</my-header>
my-header{
    border:1px solid black;
    height: 100px;
    width: 100%;
    display:block;
}

编辑：我想你想要这样的东西：小提琴

(function() {
    var div = document.createElement('sub-header');
    div.innerHTML ="I am a sub-header";
    document.getElementById("myHeader").appendChild(div);
})()

此脚本将自动创建一个名为sub-header的新元素，该新元素将嵌套在my-header中。如果你刚开始，我建议你先学习基础知识，因为你想要的东西需要Javascript，这确实是从基础知识开始的一步。祝你好运

您可能正在寻找客户端模板系统。看看这个比较。我特别建议你留胡子。希望它能帮助你。

相关文章：