동적으로 태그 추가

지정 태그 기준으로 특정 태그를 동적으로 넣고자 한다. 

태그를 넣기 위한 동적인 요소는 .html, append, after, before() api가 있다. 

$(지정타겟).html(HTML태그문자열)

<div class="h5p-iframe-wrapper affix" style="">
    <iframe id="h5p-iframe-466" class="h5p-iframe h5p-initialized" data-content-id="466" style="height: 289px;" src="about:blank" frameborder="0" scrolling="no">
    </iframe>
</div>

위와 같은 html 코드에서 h5p-iframe-wrapper 지정자를 기준으로 넣는 방법은 다음과 같다. 

.html

var tag =  '<button type="button" class="btn_miniclose"><span class="glyphicon glyphicon-remove"></span></button>';
$('.h5p-iframe-wrapper').html(tag);

. html을 사용할 경우 다음과 같다.

<div class="h5p-iframe-wrapper affix" style="">
    <button type="button" class="btn_miniclose"><span class="glyphicon glyphicon-remove"></span></button>
</div>

태그 내에 기존 태그가 교체되어 새롭게 쓰여진다.

.append

<div class="h5p-iframe-wrapper affix" style="">
    <iframe id="h5p-iframe-466" class="h5p-iframe h5p-initialized" data-content-id="466" style="height: 289px;" src="about:blank" frameborder="0" scrolling="no">
    </iframe>
    <button type="button" class="btn_miniclose"><span class="glyphicon glyphicon-remove"></span></button>
</div>

.after

지정 태그 이후에 붙인다.

<div class="h5p-iframe-wrapper affix" style="">
    <iframe id="h5p-iframe-466" class="h5p-iframe h5p-initialized" data-content-id="466" style="height: 289px;" src="about:blank" frameborder="0" scrolling="no">
    </iframe>
</div>
<button type="button" class="btn_miniclose"><span class="glyphicon glyphicon-remove"></span></button>

.before

마지막으로 지정태그 앞쪽에 배치할 수 있다. 

<button type="button" class="btn_miniclose"><span class="glyphicon glyphicon-remove"></span></button>
<div class="h5p-iframe-wrapper affix" style="">
    <iframe id="h5p-iframe-466" class="h5p-iframe h5p-initialized" data-content-id="466" style="height: 289px;" src="about:blank" frameborder="0" scrolling="no">
    </iframe>
</div>