자바스크립트로 html 생성하는 법 1
document.createElement('생성할 태그');를 변수 선언한다.변수.innerHTML='들어갈 내용'생성할 태그 안에 들어갈 내용 적기document.querySelector('들어갈 곳').appendchild(생성할 태그 선언한 변수);로 붙이기
<body>
<div id="example">
</div>
<script>
var content = document.createElement('span');
//생성할 태그를 변수 content로 선언
content.innerHTML = '내용입니다.';
//생성할 태그 안에 들어갈 내용만들기
document.querySelector('#example').appendchild(content);
//appendchild를 이용해 div id="example" 안에 붙이기
</script>
</body>자바스크립트로 html 생성하는 법2
- 생성할 태그와 내용을 변수로 선언
태그와 내용을 하나의 string처럼 세트로 적어버린다 insertAdjacentHTML(position, 변수)로 붙이기
<body>
<div id="example">
</div>
<script>
var content = '<span>내용입니다</span>';
//생성할 태그와 내용을 변수 content로 선언
document.querySelector('#example').insertAdjacentHTML('beforeend', content);
//insertAdjacentHTML를 이용해 div id="example" 안에 붙이기
//jQuery로는 $('#example').append(content);
</script>
</body>insertAdjacentHTML()에 들어갈 position 종류
'beforebegin': element 앞/위(html 코드 위치 상 위에)
'afterbegin': element 안의 맨 첫번째 child
'beforeend': element 안의 마지막 child
'afterend': element 뒤/아래(html 코드 위치 상 아래에)
'beforebegin','afterend'는 element의 부모가 존재해야 한다.
첫번째보단 두번째 방법 추천!
태그 변경 방법
//div대신 span태그로 바꾸기
document.querySelector('#example').innerHTML='<span>바꿀거예용</span>';
또는
//jQuery ver.
$('#example').html() = '<span>바꿀거예용</span>';
코딩 공부 기록장