从包含Div和Script标记的html编码字符串动态添加div元素

Question

我有python应用程序将html传递给页面作为json有效负载的一部分.我在该页面尝试做的是解码html并动态地将其添加到DOM.html标记用于包含子脚本元素的Div元素.这是我的代码,打印出解码后的HTML,但实际上并没有执行脚本:

<div  id="parentDiv">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type='text/javascript'>
        var child_div = "&lt;div id=&#39;testDiv&#39;&gt;\n &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;\n &lt;script&gt;\n d3.select(&quot;#testDiv&quot;) \n .data([4, 8, 15, 16, 23, 42])\n .enter().append(&quot;p&quot;)\n .text(function(d) { return &quot;I'm number &quot; + d + &quot;!&quot;;\n });\n &lt;/script&gt;\n &lt;/div&gt;";
        decoded = $('<div />').html(child_div).text();
        console.log(decoded);
        $("#parentDiv").append(decoded);
    </script>
</div>

但是,如果我采用上面代码中记录的html并从中创建一个页面,它可以正常执行脚本.这就是解码的html看起来像什么以及我希望动态添加到父div:

   <div  id="parentDiv">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <div id='testDiv'>
       <script src="http://d3js.org/d3.v3.min.js"></script>
       <script>
           d3.select("#testDiv")
          .data([4, 8, 15, 16, 23, 42])
          .enter().append("p")
          .text(function(d) { return "I'm number " + d + "!"; });
       </script>
    </div>
</div>

我在这做错了什么？

Answer 1

一旦附加了元素,就会在DOM中存在它们存在的DOM,但是脚本尚未初始化.

您可以使用以下内容访问脚本标记:

function getScriptsAsText() {
    var div = document.createElement('div');
    var scripts = [];
    var scriptNodes = document.getElementsByTagName('script');

    for (var i = 0, iLen = scriptNodes.length; i < iLen; i++) {
        div.appendChild(scriptNodes[i].cloneNode(true));
        scripts.push(div.innerHTML);
        div.removeChild(div.firstChild);
    }
    return scripts;
};

此函数将返回数组中的脚本.过滤数组,直到找到您所在的脚本,然后对其进行评估.

var scripts = getScriptsAsText();
eval(scripts[0])