티스토리 뷰

웹개발(프론트)

JS로 태그 추가하기

수달찌 2021. 3. 16. 22:56

목차

     

    저번 포스트에서

    태그 추가하는 법을 지나치듯 짚고 넘어갔었다.

     

    SVG Z-index

    목차 SVG SVG는 백터 로 이미지 를 표현하는 태그 이다. 이런 식으로 html 그리기 Svg / Canvas SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이

    sirong.tistory.com

    이에 대해 좀 더 짚어보려 한다.

     

    createElement()

    함수 이름에서 감이 오겠지만 요소를 생성하는 함수이다.

    조금 더 친숙한 말로 얘기하자면 태그 만들기!!

     

    createElement인자로 "태그명"을 적어주면,

    그 태그를 만들 수 있다.

    document.createElement("div");

     

    코딩

    자 한번 직접 만들어보자!

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

    html 기본 코드이다.

    오늘 예제에선 이상태에서 함수를 통해서만 태그를 만들 것이다

    Js 불러오기

    일단 Js를 html에 불러오자

    html 파일이 있는 폴더에 js파일을 만들어주자

    그다음 body 밑에,

    scrpit태그를 열어 src(주소)에 js파일 경로를 적어주자

    <body>
  
  <script src="./main.js"></script> // script를 실행하는 태그이다.
  // src안에 경로를 적으면 해당파일을 불러온다.
</body>

    body밑에 적는 이유는

    우리가 body안에 태그를 추가시키기 위해,

    body태그를 만들고 나서 Js 코드를 실행해야 하기 때문이다.

     

    Js 코딩

    var newDiv = document.createElement("div"); // div 태그를 만든다
var newContent = document.createTextNode("나아가자!"); // 텍스트 노드(텍스트 컨텐츠)를 만든다
// 안의 인자가 택스트 내용!

newDiv.appendChild(newContent); // 텍스트 노드를 div태그안에 넣는다.
document.body.appendChild(newDiv); // document.body 안에 자식요소로 newDiv를 추가한다

    결과

    태그가 생겼다!

    끝

     

    저작자표시

    '웹개발(프론트)' 카테고리의 다른 글

    line-height  (0) 2021.03.18
    햄버거 메뉴에 대한 이슈  (0) 2021.03.17
    SVG Z-index  (0) 2021.03.14
    크롬 화면 캡처  (0) 2021.03.12
    Axios  (0) 2021.03.11
    댓글
    공지사항
    최근에 올라온 글
    최근에 달린 댓글
    Total
    Today
    Yesterday
    링크
    TAG more
    «   2025/04   »
    일 월 화 수 목 금 토
    1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30
    글 보관함