Spring[스프링]_자바스크립트_jQuery를 이용하여 HTML삽입

 

자바스크립트(JAVASCRIPT)로 HTML 코드 삽입하기

<script type="application/javascript">
document.getElementById('selectTagId').innerHTML += '<button type="submit">Submit</button>';
</script>

일반적으로 매번 document.getElementById()를 이용하요 요소를 선택하고 그 요소에 내가 원하는 HTML을 .innerHTML을 이용하여 입력하게 할 수 있습니다.

 

저도 위의 방식으로 간편하게 만들고 싶을때 innerHTML 방법을 이용합니다.

let button = document.createElement('input');
input.innerHTML = 'text';
document.getElementById('selectTagId').appendChild(input);

다음으로 .appendChild() 방식으로 가장 일반적이고 유용하게 쓸 수 있는 함수입니다.

document.createElement(' ')를 이용하여 내용을 넣고 싶은 태그를 선택을 하고 .appendChild()를 이용하여 위에 작성한 input 요소를 selectTagId 안에 삽입해줍니다.

let html = '<button type="button" id="submit">Submit</button>';
document.getElementById('selectTagId').insertAdjacentHTML('afterend', html);

아래의 요소에 상대적인 위치를 취합니다.

• 'beforebegin': 선택 id요소 자체 앞
• 'afterbegin': 선택 id요소 바로 내부, 첫 번째 자식 이전
• 'beforeend': 선택 id요소 바로 내부, 마지막 자식 뒤
• 'afterend': 선택 id요소 자체 뒤.

 

매번 자바스크립트로 HTML을 추가하던 나에게 새로운 녀석이 나타났다..

제이쿼리템플릿으로 jQuery HTML을 추가하는것...

제이쿼리 템플릿으로 HTML 코드 삽입하기

<script type="text/x-jquery-tmpl" id="exampleID">
$(document).ready(function() {
    $('#selectTagId').append('<button type="submit">Submit</button>');
});
</script>

보통 이러한 방식으로 jQuery를 이용하여 선택한 태크 id에 .append(' '); 함수를 사용하여 태그를 옆에 붙일 수 있습니다.

.append에 지정된 HTML을 <div> 컨테이너의 마지막 자식으로 삽입하는 메서드입니다.

 

$(document).ready(function() {
    $('#selectTagId').prepend('<label>Enter your job!</label>');
});

다른방법으로 .prepend(' '); 함수를 사용하면 지정된 콘텐츠를 <div> 컨테이너의 첫 번째 자식으로 삽입할 수 있습니다.

 

※ 결론은 제이쿼리를 이용해서 HTML에 태그 및 내용을 추가하고 싶으면 .append() 또는 .prepend()를 사용하면되는데 선택한 <div> 영역의 id 값을 부여하고 append()함수를 쓰면 <div>영역 안에 맨뒤에 입력한 HTML 값이 들어오고 .prepend() 함수를 쓰면 <div>영역 안에 맨앞에 입력한 HTML 값을  넣을 수 있다.

 

※ 주의사항 ※ 

<script type="text/x-jquery-tmpl" id="exampleID">제이쿼리템플릿</script>

제이쿼리 템플릿을 사용할떄는 스크립트 타입을 정확히 명시해주어야한다.