帶有JavaScript代碼的HTML字符串，JS不起作用

Question

這是我的測試javascript函數

<script type="text/javascript">
    function test() {
        var sHTML = "<script type='text/javascript'> " +
                        "function showmsg() { " +
                            "alert('message'); " +
                        "} " +
                     "<\/script>" +
                     "<div>" +
                        "<a href='#' onclick='javascript:showmsg(); return false;'>click</a>" +
                     "</div>";
        var divTemp = document.createElement("div");
        divTemp.innerHTML = sHTML;

        var d = document.getElementById("div1");
        d.appendChild(divTemp);
    }
</script>

當我運行該功能時， div沿着a標簽中添加div1 ，但是當我點擊錨標記，它說showmsg is not defined ，這表明瀏覽器不解析script標簽。

沒有任何第三方庫，如何實現這一目標？

更新：

可能的用法是，我想允許用戶與JavaScript代碼一起創建HTML模板，然后我的JS庫將使用這些HTML模板來呈現用戶定義的標記，並允許用戶通過JS實現其自定義邏輯。

Answer 1

像這樣動態插入<script>標記時，瀏覽器不會運行JavaScript代碼。

取而代之的是，您可以直接定義函數！

    function test() {
      window.showmsg = function() {
        alert("message");
      };

      var sHTML = "<div>" +
                    "<a href='#' onclick='javascript:showmsg(); return false;'>click</a>" +
                 "</div>";
    var divTemp = document.createElement("div");
    divTemp.innerHTML = sHTML;

    var d = document.getElementById("div1");
    d.appendChild(divTemp);
}

諸如jQuery之類的庫具有將<script>塊從填充到某個元素的innerHTML的文本中剝離的代碼，然后使用eval()對其進行評估，因此如果代碼某種程度上“卡在”了內容塊中，則這是一件事。

Answer 2

使用innerHTML時，需要在腳本內容上運行eval 。 嘗試類似：

var scripts = divTemp.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++) {
    eval(scripts[i].textContent);
}

顯然， 在將innerHTML注入DOM 之后 ，您最終需要這樣做。

Answer 3

使用jQuery，這可以幫助您：

$('<script>function test(){alert("message");};</' + 'script><div><a href="#" onclick="test();">click</a></div>').appendTo(document.body)

http://jsfiddle.net/TSWsF/