템플릿 태그 함수 예제

.js

const insertHTML =
  (selector, { position = "beforeend", prefix = "", suffix = "" }) =>
  (strings, ...values) => {
    const $selected = document.querySelector(selector);

    if ($selected) {
      const htmlString = strings.reduce((result, string, i) => {
        result += string;

        if (values[i]) {
          result += prefix + values[i] + suffix;
        }

        return result;
      }, "");

      $selected.insertAdjacentHTML(position, htmlString);

      return;
    }

    console.warn(
      `selector: ${selector} 에 해당하는 엘리먼트가 존재하지 않습니다.`
    );

    return;
  };

const content = "myButton";

insertHTML("#elemId", { prefix: "(", suffix: ")" })`
  <button>${content}</button>
`;

결과로

#elemId 아이디를 가진 DOM 요소에

<button>(myButton)</button>

를 붙일 수 있다.