1. 먼저, Underscore.js 라이브러리를 HTML 파일에 추가합니다. <script> 태그를 사용하여 Underscore.js 파일을 로드합니다.

<script src="underscore.js"></script>

1. 다음으로, HTML 템플릿을 작성합니다. Underscore.js 템플릿 문법을 사용하여 HTML 요소를 동적으로 생성할 수 있습니다. HTML 템플릿은 <script> 태그 내에 작성합니다. 템플릿 내에는 템플릿 변수를 사용하여 동적인 데이터를 삽입할 수 있습니다.

<script type="text/template" id="template">
  <div class="post">
    <h2><%= title %></h2>
    <p><%= content %></p>
  </div>
</script>

1. Underscore.js의 _.template 함수를 사용하여 템플릿을 컴파일합니다. 컴파일된 템플릿은 자바스크립트 함수로 반환됩니다. 템플릿 함수는 인자로 데이터 객체를 받아서 HTML 문자열을 생성합니다.

var templateString = document.getElementById('template').innerHTML;
var template = _.template(templateString);

var data = {
  title: '제목',
  content: '내용'
};

var htmlString = template(data);

1. 이제 htmlString 변수에는 컴파일된 HTML 문자열이 저장되어 있습니다. 이를 사용하여 HTML 요소를 동적으로 생성하거나 다른 HTML 요소에 삽입할 수 있습니다.

document.getElementById('container').innerHTML = htmlString;

위의 과정을 따라가면 Underscore.js를 사용하여 동적인 HTML 문자열을 생성하고 출력할 수 있습니다.