有没有办法制作包含其他标签的自定义 HTML 标签？

Posted 2023-03-30

【中文标题】有没有办法制作包含其他标签的自定义 HTML 标签？

【英文标题】：Is there a way to make a custom HTML tag that incorporates other tags?

【发布时间】：2017-03-26 04:47:34

【问题描述】：

这听起来可能很愚蠢，但有没有办法可以制作包含其他标签的自定义 html 标签？

就像现在我有这样的东西：

<div>
    <img></img>
    <p></p>
</div>

有没有办法将所有这些都放入一个更简单的自定义标签中，如下所示：

<caption-image pic_src="/path" p_text="blahblahblah" />

如果 javascript 做不到，也许可以像 XML 一样使用。

我想要这样的东西的原因是我需要制作大量这样的东西，这样可以简化 html 并使其更容易更改。

【问题讨论】：

你可能需要一个简单的循环。

这里有一篇关于使用 Javascript 创建自定义 HTML 元素的文章：html5rocks.com/en/tutorials/webcomponents/customelements

@PeterCollingridge ++！就在我认为我已经看到所有新的网络技术顺流而下时，一艘巨大的良善货船飘过。

【参考方案1】：

您可以使用框架来执行此操作，例如 AngularJS 或 ReactJS。不过我想你现在学起来会有些困难，所以你可以自己用一些Javascript来做。

您可以像现在一样创建标签，并使用 javascript 对其进行解析，从中获取您需要的内容并构建您的 HTML 页面。

这对你有用（我假设你使用的是 jQuery）：

<caption-image pic_src="path1.png" p_text="blahblahblah"></caption-image>
<caption-image pic_src="path2.png" p_text="123123123"></caption-image>
<caption-image pic_src="path3.png" p_text="this is an image"></caption-image>
<caption-image pic_src="path4.png" p_text="just some text"></caption-image>

<div id="someContainer">
    <figure id="figTemplate">
        <img src="" >
        <figcaption></figcaption>
    </figure>
</div>

<script>
    $.each($('caption-image'), function (key, obj) 
        var src = $(obj).attr('pic_src');
        var p_text = $(obj).attr('p_text');

        $(obj).hide(); //or remove if you want $(obj).remove()

        var clone = $('#figTemplate').clone();
        clone.removeAttr('id')
                .children('img').attr('src', src).attr('alt', p_text).end()
                .children('figcaption').text(p_text);

        $('#someContainer').append(clone);

    );
</script>

我使用了figure 元素，因为它完全符合您的要求，但您也可以使用div、img 和p 来做同样的事情