Sintory의 웹 개발 블로그

누적 방식 생략.1. appendChild- 가장 기본적인 방- 기존 내용은 유지, 새로운 요소 추가 가능- DOM 요소를 생성하고, 이를 부모 요소에 추가하는데 사용- Dom 요소만 추가 가능.function addtext(event) {  event.preventDefault();  // 새로운 텍스트 노드 생성  const newText = document.createElement("p");  newText.innerText = "Hello";  // 기존 내용에 추가  result.appendChild(newText);} 2. append- appendChild와 비슷하지만, 더 유연- 텍스트 노드와 DOM 요소 모두 추가 가능- 여러 요소를 한번에 추가 가능function addtext(even..

텍스트를 추가할 때 사용하는 코드로는 innerText와 appendChild 가 있다. 1. innerText 의 동작- 요소의 텍스트 내용을 덮어씌우는 방식으로 작동- 기존에 있는 내용을 지우고 새로운 텍스트로 대체매번 같은 text만 표시되고 이전에 추가된 텍스트는 사라지게 됨. 2. appendChild 의 동작- 기존의 내용은 유지되고, 새로운 요소를 추가- DOM 요소를 생성하고, 이를 부모 요소에 추가하는 데 사용> 그리하여 document.createElement("p") 로 새로운 요소 를 생성 후   result.append(text) 하여야 #result에 새로운 요소를 추가할 수 있다. 3. innerText에도 텍스트를 계속 추가하는 방법계속해서 텍스트를 추가할 수도 있다. 하지만..

JavaScript의 자료형은 크게 두 가지로 나눌 수 있다.[ 원시 자료형(7개) ] 과 [ 참조 자료형(1개) ] 로 나눌 수 있다. 원시 자료형이란 값이 직접 저장되며, 변경 불가능(immutable) 하다.참조 자료형이란 값이 메모리 주소를 통해 저장되며, 객체 기반으로 작동한다.하지만, 이렇게만 정리를 하면 이해하기 어려울 것이다. 값이 직접 저장된다는 건 이해가 된다해도 메모리 주소에 저장이된다? 이 부분은 이해하기 어려울 것이다. JavaScript 에서 변수와 메모리는 프로그램이 실행되면서 데이터를 관리하고 사용하는 방식의 핵심이다.이러한 모든 부분을 조금이라도 이해하기 위해서는 변수 선언과 메모리 할당, JS의 메모리 구조를 자세히 알 필요가 있다. 1. 변수와 메모리의 관계1) 변수의 ..

버튼을 클릭하여 onclick 이벤트를 작동하고 싶을 때, 활용할 수 있는 코드는 정말 많다.이번 시간에는 그러한 코드 유형들을 살펴보겠다. 1. HTML 내에서 직접 Onclick 사용- onclick 속성을 이용하여 인라인으로 이벤트 처리 가능button onclick="alert('Button clicked!')">Click Mebutton>> 버튼을 클릭시, alert() 안에 있는 텍스트를 화면에 띄운다. 2. JavaScript 에서 Dom 요소에 직접 onclick 할당const button = document.querySelector('button');button.onclick = function () {    console.log('Button clicked!');};> 익명 함수임 3...