是否有一种方法可以使自定义HTML标记合并其他标记

Question

这可能听起来很愚蠢，但是是否有一种方法可以使自定义HTML标记包含其他标记?

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

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

有没有一种方法可以把所有这些都放入一个更简单的自定义标签中，看起来像这样:

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

如果Javascript做不到，可以使用XML。

我想这样做的原因是我需要做很多这样的东西，这将简化html，使其更容易更改

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