ran
한국어

create

DOM 요소를 만드는 헬퍼 함수로, HTML과 SVG 요소를 모두 지원합니다.

API

create

반환값

인자 설명 타입
HTMLElement 생성된 DOM 요소 HTMLElement

매개변수

매개변수 설명 타입 기본값
tagName 태그 이름 string 필수
options 생성 옵션(선택) ElementCreationOptions 선택

예시

기본 사용법

import { create } from 'ranuts';

const div = create('div');
div.textContent = 'Hello World';
document.body.appendChild(div);

SVG 요소 만들기

import { create } from 'ranuts';

const svg = create('svg');
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');

const circle = create('circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
svg.appendChild(circle);

생성 옵션 사용하기

import { create } from 'ranuts';

// 커스텀 요소 만들기
const customElement = create('my-custom-element', { is: 'my-element' });

참고

  1. 자동 인식: SVG 태그를 알아서 알아보고 올바른 네임스페이스로 만듭니다.
  2. HTML 요소: 일반 HTML 요소는 document.createElement로 만듭니다.
  3. SVG 요소: SVG 요소는 document.createElementNS로 만듭니다.
  4. 활용: SVG 요소를 만들어야 하는 상황에서 절차를 줄여 줍니다.