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，而这确实是基础知识的一个进步。祝你好运!