Javascript 创建包含预定结构的新标记

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

某物

别的

我想一定有这样的事情，但我真的不知道怎么做是否有某种方法来实现以前的结构？即，什么是“以前的一些代码”？

---

欢迎任何建议。

是的，您可以使用如下自定义元素： 还请阅读以下内容： 基本上：破折号是浏览器区分自定义元素和内置元素的关键。无论如何，请注意，并非所有浏览器都支持此功能

<my-header>Hello</my-header>

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

---

此脚本将自动创建名为sub header的新元素，该元素将嵌套在

my header

中。如果你刚开始学习，我建议你先学习基础知识，因为你想要的东西需要Javascript，而这实际上是基础知识的一个进步。祝你好运

您可能正在寻找客户端模板系统。看看 我特别建议使用

---

希望它能对您有所帮助。

可能重复@blex我是

html

的初学者，也许这就是我不理解两者关系的原因。。。但是，在链接的答案中，它似乎没有提到内部结构（用链接问题的话来说，“菜单”或“午餐”如何与结构

li

？它没有出现在答案中，在

菜单{…}

之外是不可行的）。你能再帮我一点吗？很抱歉给您带来不便。@Jjm我很困惑。我认为我们正在努力解决一个x/y问题here@Mikey什么意思？不可能吗？也许不是……请参见：是的，但我想在新标记中给出说明，即，当调用“我的标题”时，浏览器知道必须有几个嵌套的

div

等等，我认为它一定类似于编辑。。。我会尝试；非常感谢你。JavaScript没有问题，我知道基本知识。有没有办法对新标记进行编程，以便它要求特定（和新）属性？例如，

要求

src=“…”

和

要求

href=“…”

；我希望

要求

title=“…”

并使用给定的信息。可能吗？@Jjm是的，您的自定义元素也可以有自定义属性。为了从另一个注释中回答您的问题，自定义元素还可以通过Web组件规范的另一部分（称为“内部结构”）具有“内部结构”。Web组件仍然处于事物的前沿；如果你现在想尝试一下，谷歌是一个很好的起点。

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

})()