개발하는 루루언니

javascript / createElement 엘리먼트 생성 후 html 에 추가하기 본문

컴퓨터 정보/javascript

javascript / createElement 엘리먼트 생성 후 html 에 추가하기

혜닝혜루 2023. 5. 31. 09:53
728x90
반응형

자바스크립트에서 html 에 작성하지 않은 문구도 동적으로 추가하여 화면에 보여줄 수 있다.

 

 

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
</body>
</html>
document.body.onload = addElement;

function addElement () {
  // create a new div element
  var newDiv = document.createElement("div");
  // and give it some content
  var newContent = document.createTextNode("환영합니다!");
  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

📕출력 화면

환영합니다!
위의 텍스트는 동적으로 추가했습니다.

 

 

★ 알아야 하는 개념

createElement : 요소를 만드는 메서드
const hello = document.createElement( " h1" )
// <h1></h1>  코드가 생성이 된다.

요소를 만들기만해서는 사용할 수 없다. HTML 이 없기 때문이다.

 appendChild : 선택한 요소 안에 자식 요소를 추가 한다. 
document.body.appendChild(hello);
위에서 만든 hello 라는 변수를 appendChild 에 자식요소를 추가 하면 사용할 수 있다.
// <h1> 태그 코드를 가진 hello 라는 변수가 body 태그 내부에 생성이 된다.

기본적으로 appendChild 를 통해 요소를 삽입 하면 맨뒤에 위치하게 된다.

반대로 prepend() 를 사용하게 되면 맨 앞에 위치하게 된다는 차이점이 있다.

 

insertBefore : appendChild ( ) 와 비슷하나 전달받는 인자가 2개 이다.
첫번째 : 삽입하려는 노드
두번째 삽입이 기준이 되는 노드, 새 노드는 이 앞에 놓이게 된다.
두번째 인자가 null일 경우  appendChild() 와 같이 작동해 맨 뒤에 삽입된다.
 위의 예제로 봤을때 newdiv가 첫번째 인자로, currentDiv 가 두번째 인자로 들어가게 되는데
출력 결과를 확인해 보면 newdiv 인 환영합니다가 우선 출력되는걸 확인 할 수 있다.

 

728x90

'컴퓨터 정보 > javascript' 카테고리의 다른 글

javascript : 다중 for 문과 continue  (0) 2023.08.07
javascript : parseInt / parseFloat 문자열을 숫자형으로 변환하기  (0) 2023.08.07
javascript: 객체안에 함수 this  (0) 2023.03.01
javascript : 객체 비구조화 할당  (0) 2023.03.01
javascript : Number 숫자변환 / 숫자 ( , ) 콤마 toLocaleString 알아보기  (0) 2023.02.28
'컴퓨터 정보/javascript' Related Articles more