javascript - 创建涉及预定结构的新标签

Question

刚刚处理 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>

我想一定有这样的事情，但我真的不知道该怎么做。 有什么方法可以实现前面的结构吗？也就是说，“以前的一些代码”应该是什么？

欢迎任何建议。

Answer 1

是的，您可以使用这样的自定义元素: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;
}

编辑:我想你想要这样的东西:fiddle

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

})()

此脚本将自动创建一个名为 sub-header 的新元素，该元素将嵌套在 my-header 中。如果您刚开始，我建议您首先了解基础知识，因为您想要的内容需要 Javascript，而这确实是基础知识的一个进步。祝你好运!