如何在div中使用javascript附加脚​​本

Question

我想在javascript中将在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")

但如果我改变了＆＃34; $（＆＃39;＃divId＆＃39;）＆＃34;不起作用，所以问题是：

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

我创建了一个演示here：

更新： 主要目的是在单击按钮时更新数据位置，并将框内的文本发送到数据位置以在那里搜索并在文本框下方显示脚本图。也许这是另一种简单的方法。

Answer 1

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

.appendTo("#map")

第二个问题。

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

DEMO：

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>

Answer 2

运行日期输入行

DateInput('creneau_2',true,'DD-MON-YYYY');

你可以尝试在jQuery中完成所有操作而不是混合使用javascript选择器。

$("#test").append("<script type='text/javascript'>DateInput('creneau_2',true,'DD-MON-YYYY');</script>");

Answer 3

看看这个：

function scripting(){
	var src_fld = document.getElementById('txt_f').value ;
    
    $("#main_view").find("script[id='test']").remove();
    console.log("Size: " + $("#main_view").size());
  
	$("<script id='test'/>", {
    	"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
		"data-location":"http://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($("#main_view"))
    
    console.log($("#main_view").html())
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane carpark" id="main_view">		
    <input type="text" id="txt_f" name="txt_f">
    <input type="button" 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>