他のタグを組み込んだカスタムHTMLタグを作成する方法はありますか？

Question

これはおそらくばかげているようですが、他のタグを含むカスタムHTMLタグを作成する方法はありますか？今のように

私はこのようなものを持っている：たぶん

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

：

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

がより簡単で、このようになりますカスタムタグの中にそのすべてを配置する方法はあります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