有没有一种方法可以制作一个包含其他标记的自定义HTML标记？

Question

这可能听起来很蠢，但是有没有一种方法可以制作包含其他标记的自定义HTML标签？

比如现在我有这样一个东西：

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

有没有一种方法可以将所有内容放入一个自定义标签中，使其更简单，并且看起来像这样：

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

也许可以使用XML来实现，如果JavaScript无法完成。

我想要这样做的原因是我需要制作大量这样的内容，这将极大地简化HTML并使其更易于更改。

- Evan

---

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

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

@PeterCollingridge ++！就在我以为已经看到了所有新的网络技术漂流而过时，一艘巨大的好处货船漂过来了。 - Brad

Answer 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="" alt="">
        <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来达到同样的效果。请注意，保留HTML标签。

- jpenna