create-element-helper

A helper for `document.createElement()` that can be loaded into a script with `require`.

2025-12-18 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/559372/1716505/create-element-helper.js을(를) 사용하여 포함하는 라이브러리입니다.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

function tag(name) {
  return {
    elem: document.createElement(name),

    id: function (value) {
      this.elem.setAttribute('id', value)
      return this
    },

    attr: function (name, value) {
      this.elem.setAttribute(name, value)
      return this
    },

    style: function (name, value) {
      this.elem.style[name] = value
      return this
    },

    cssClass: function (value) {
      this.elem.classList.add(value)
      return this
    },

    checked: function (value) {
      this.elem.checked = !!value
      return this
    },

    text: function (content) {
      this.elem.textContent = content
      return this
    },

    on: function (event, handler, options = {}) {
      this.elem.addEventListener(event, handler, options)
      return this
    },

    append: function (child) {
      this.elem.appendChild(child.elem || child)
      return this
    },

    create: function () {
      return this.elem
    },
  }
}