■ JS로 HTML 생성
document.createElement(), appendChild()
<div id="test">
</div>
<script>
var a = document.createElement('p');
a.innerHTML = '안녕';
document.querySelector('#test').appendChild(a);
</script>
document.createElement() 로 html 자료를 생성(p 태그)해서 '안녕' 텍스트를 넣습니다.
그리고 appendChild() 로 만들었던 p 태그를 새로운 자식 요소로 추가할 수 있습니다.
insertAdjacentHTML()
<div id="test">
</div>
<script>
var a = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>
문자자료로 html 요소를 만든 후에 insertAdjacentHTML() 에 넣으면 요소가 추가가 됩니다.
beforeend는 안쪽 맨 밑에 추가하라는 뜻입니다.
문자자료로 html 요소를 만들 때 백틱기호(`)를 사용하면 엔터키도 쓸 수 있습니다.
append()
<div id="test">
</div>
<script>
var a = '<p>안녕</p>';
$('#test').append(a);
</script>
jQuery 로 쓰면 더 짧게 만들 수 있으며 안쪽 맨 밑에 추가할 수가 있습니다.
■ forEach와 for in
forEach()
var array = ['가', '나', '다', '라', '마'];
array.forEach(function(element, i) {
console.log(element, i);
});
// 가 0
// 나 1
// 다 2
// 라 3
// 마 4
forEach()는 array 자료형에서 쓸 수 있는 반복문 함수로 배열수만큼 for 반복문을 실행해줍니다.
forEach() 안의 콜백함수에서 첫 번째 파라미터는 array 안의 데이터가 들어가고,
두 번째 파라미터는 0부터 1씩 증가하는 정수가 됩니다.
for in()
var person = { name: 'John', age: 30, location: 'korea' };
for (var prop in person) {
console.log(`${prop}:${person[prop]}`);
}
// prop 으로 key 출력 , person[prop] 으로 value 출력
// name:John
// age:30
// location:korea
for in 반복문은 object 자료형에서 쓸 수 있는 반복문입니다.
prop 자리에는 key가 들어갑니다.
■ arrow function
arrow function 문법
(parameter1, parameter2, ..., parameterN) => {
// 함수의 실행 코드
return expression; // 반환 값
};
Arrow function(화살표 함수)은 함수를 간결하게 정의하는 방법 중 하나입니다.
Arrow function(화살표 함수)는 익명 함수로 사용되며, 함수를 표현하기 위해 function 키워드 대신 화살표(=>)를 사용합니다.
Arrow function(화살표 함수)는 일반 함수에 비해 간결하고 가독성이 좋으나,
주변 범위의 this 값을 상속하기 때문에 메서드, 생성자 함수, arguments 객체 등과 같이 this가 중요한 상황에서는 일반 함수를 사용하는 것이 적절할 수 있습니다.
'JavaScript' 카테고리의 다른 글
JavaScript(스크롤 위치에 따라 변하는 애니메이션) (0) | 2023.05.25 |
---|---|
JavaScript(Ajax, Array 자료) (0) | 2023.05.23 |
JavaScript(Array, Object 자료형, 문자 중간 변수 넣기) (0) | 2023.05.19 |
JavaScript(for 반복문, 이벤트 버블링, dataset) (0) | 2023.05.18 |
JavaScript(스크롤 이벤트) (0) | 2023.05.18 |