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

这听起来可能很愚蠢，但是有没有一种方法可以让我定制一个包含其他标记的HTML标记

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

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

如果Javascript不能做到这一点，可能会使用类似XML的语言

---

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

您可以使用一个框架来实现这一点，比如AngularJS或ReactJS。但是我认为你现在学习它会有一些困难，所以你可以自己用一些Javascript来做

您可以像现在这样创建标记，并使用javascript解析它，从中获取所需内容并构建HTML页面

这样就可以了（我假设您正在使用jQuery）：

$。每个（$（'caption-image'），函数（键，obj）{
var src=$（obj.attr（'pic_src'）；
var p_text=$（obj.attr（'p_text'）；
$（obj.hide（）；//如果需要$（obj.remove（）），请删除
var clone=$（'figTemplate'）.clone（）；
clone.removeAttr（'id'））
.children（'img'）.attr（'src'，src）.attr（'alt'，p_text）.end（）
.儿童（'figcaption'）。文本（p_文本）；
$（'#someContainer'）。追加（克隆）；
});

---

我使用了

figure

元素，因为它完全满足了您的需要，但是您可以使用

div

、

img

和

p

执行相同的操作。您可能需要一个简单的循环。这里有一篇文章介绍如何使用Javascript创建自定义HTML元素：@PeterCollingridge++！就在我想我已经看到所有新的网络技术顺流而下的时候，一艘善良的巨型货船漂过。

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

<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>