如何使用javascript和jQuery

Question

是否可以访问车把模板内的按钮元素？ 我试图通过使用javaScript以常规的，旧式的方式做到这一点，但我想这个模板不在DOM中，所以当我尝试在页面上找到按钮时，我总是得到null。

这是代表把手模板的代码：

<script id="modal-template" type="text/x-handlebars-template">
    <div id="modalAddNewTest" class="modal">
        <div class="modal-content">
            <span class="close">x</span>
            <form name="formTestInfo" method="post">
                {{lblName}}<br>
                <input type="text" id="tbName" name="tbName">
                <p id="nameVal" class="text-color"></p>
                <br>
                {{lblTest}}<br>
                <div id="select-boxes">
                    <select class="dynamic-select" id="ddlTest">
                        <option value=""></option>
                        <option value="Belbin">Belbin</option>
                        <option value="Raven">Raven</option>
                        <option value="PPA">PPA</option>
                        <option value="PPA+">PPA+</option>
                        <option value="Basic Knowledge">Basic Knowledge</option>
                        <option value="PCT">PCT</option>
                    </select>
                </div>
                <p class="text-color" id="testVal"></p>
                <div id="newTest">
                </div>
                <br>
                <br>
                <button id="btnCancel" type="button">Cancel</button>
                <button id="btnSave" type="button">Save</button>
            </form>
        </div>
    </div>
</script>

所以你可以看到里面有两个按钮：

<button id="btnCancel" type="button">Cancel</button>
<button id="btnSave" type="button">Save</button>

当我尝试在javaScript中执行此操作时：

//Remove modal on Cancel button
var btnCancel = document.getElementById("btnCancel");
btnCancel.onclick = function () {
  var container = $("div#modal");
  container.remove();
};

我得到了这个例外：

根本无法识别按钮。 有人知道访问Handlebars模板内部元素的最佳方法是什么？