js로 html 태그 만들기

Make a html tag using js

document 객체의 메소드를 사용해서 html 태그를 만들 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기</title>
</head>
<body>
    <!--<div>Heunna</div>-->
    <input type="text" />
    <button>등록</button>
    <script src="끝말잇기.js"></script>
</body>
</html>

var body = document.body;

var word = document.createElement('div');//태그를 새로 만들었으면 반드시 append로 추가해줘야한다!
word.textContent = 'Heunna'
document.body.append(word);

var prompt = document.createElement('input');
document.body.append(prompt);

var btn = document.createElement('button');
btn.textContent = '입력';//태그 안에 들어가는 글자.
document.body.append(btn);

var result = document.createElement('div');
document.body.append();

DOM은 document는 윈도우 안에서 브라우저가 지원하는 객체이고, html을 가리키고 있고, html을 js로 바꿔주는 통역사 역할을 한다. 브라우저가 document를 제공하면서 <body>, createElement, apped 등으로 태그를 새로 추가할 수 있게 한다.

Previousdocument 객체와 DOM Next끝말잇기 화면에 표시

Last updated 5 years ago