다른 태그를 통합하는 사용자 정의 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로 할 수 있습니다.

당신이하고있는 것처럼 태그를 만들 수 있으며, 자바 스크립트로 파싱하여 필요한 것을 얻고 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