jquery 将代码片段绑定到 div 的最佳方式

Question

将代码片段绑定到 div 的最佳方法是什么？在某些代码片段必须动态绑定到 dom 元素的少数情况下，开发人员通常会选择什么过程。

如果我们从数据库中获取代码片段，那么该片段应该按原样显示在 div 中。这怎么可能？

$(function(){
    var myCodeSnippet="function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            console.log("drag", ev);
            ev.dataTransfer.setData('text/html', ev.target.id);
        }";

        $('#test').html(myCodeSnippet);
});

html代码

<div id="test">
</div>

Answer 1

尝试使用 pre 元素，换行符 "\n" 字符

$(function(){
    var myCodeSnippet="function allowDrop(ev) {\n"
          + " ev.preventDefault();\n"
        + "}\n\n"
        + "function drag(ev) {\n"
        +    " console.log('drag', ev);\n"
        +   " ev.dataTransfer.setData('text/html', ev.target.id);\n"
        + "}";
        $('#test').text(myCodeSnippet);
});

pre {
  background:#eee;
  padding: 16px;
  width: 420px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<pre id="test">
</pre>
</body>

jquery 将代码片段绑定到 div 的最佳方式

jquery best way to bind a code snippet to a div

javascript

jquery

code-snippets