javascript - 如何使用 javascript 在 div 内附加脚本

Question

我想将在 javascript 中生成的脚本附加到之前在 HTML 中创建的 div 中，问题是只有在以下情况下才有效

$("<script />", {
        "src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
        "data-location":"http://en.parkopedia.co.uk/parking/" + search_field2,
        "data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
        "data-size":"650:400",
        "id":"script_map",
        "type":"text/javascript"
    }).appendTo("body")

但是如果我将其更改为“$('#divId')”则不起作用，所以问题是:

1. 当您点击按钮时，如何附加在 div 内生成的脚本？
2. 当我单击按钮两次时，如何防止重复脚本？因为它在体内工作，但是当我再次单击时，它会显示两个脚本窗口。所以我应该在创建新脚本之前删除脚本，或者如果我要放入 div 内部，请清理里面的所有子级。

我创建了一个演示 here :

更新:主要目的是在单击按钮时更新数据位置，并将框中的文本发送到数据位置以进行搜索并在文本框下方显示脚本映射。也许这是另一种简单的方法。

Answer 1

这将回答您的第一个问题。

.appendTo("#map")

第二个问题。

 if ($("#script_map").length > 0) {
            $("#map").html("");
        }

演示:

http://jsfiddle.net/kishoresahas/oosttuc0/4/

代码:

window.scripting = function () {
    if ($("#script_map").length > 0) {
    	$("#map").html("");
    }
        var src_fld = document.getElementById('txt_f').value;

        $("<script />", {
            "src": "//en.parkopedia.co.uk/js/embeds/mapView.js",
                "data-location": "//en.parkopedia.co.uk/parking/" + src_fld,
                "data-options": "l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
                "data-size": "650:400",
                "id": "script_map",
                "type": "text/javascript"
        }).appendTo("#map")
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="tab-pane carpark" id="main_view">
    <input type="text" id="txt_f" name="txt_f">
    <input type="submit" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
    <div id="map" name="map"></div>
    <iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>