如何在div内使用JavaScript附加脚​​本

Question

I want to append a script generated in javascript inside a div created before in HTML, the problem is that only works if

$("<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")

but if I change that for "$('#divId')" does not work, so the questions are:

1. How can I append that script generated inside a div when you click into a button?
2. How can I prevent to duplicate the script when I click twice in the button? Because it's working inside the body, but when I click again it shows two script windows. So i should remove the script before create a new one or if I get to put inside the div, clean all the childs inside.

I've created a demo here :

Update: The main aim is to update the data-location when you click on the button and send the text inside the box to the data location to search there and show the script map below the textbox. Maybe it is another simple way to do it.

Answer 1

This will answer your first question.

.appendTo("#map")

And for second question.

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

DEMO :

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

Code :

 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

Run the Date input line

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

you could just try and do it all in jQuery rather than mixing javascript selectors.

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

Answer 3

Look this:

 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>