javascript - 使用 div 时出现错误appendTo()

Question

问题是我想附加一个 <script>在 div 内。如果我使用以下代码，它可以正常工作:

$("<script />", {
    "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("body")

但是如果我改变body对于 ("#divId")这是行不通的。我尝试使用 fiddle 并且使用 div id 工作正常。有人知道为什么在我的真实页面上不起作用而在 fiddle 上起作用吗？

http://jsfiddle.net/dperezq/oosttuc0/6/

问题是该 map 应该位于 div 内，以便仅出现在一个选项卡中，因为有很多选项卡，而我只想在其中一个选项卡中显示它。除了 div 之外还有 body 的替代品吗？

更新:当我更改为 #divId 时显示的错误如下:

Uncaught Error: Missing attributes passed to mapView.js

它会转到以下外部 .js:

if (
    !script.hasAttribute('data-location')
    || !script.hasAttribute('data-options')
    || !script.hasAttribute('data-size')
) {
    throw new Error('Missing attributes passed to mapView.js');
}

显示错误“缺少传递给mapView.js的属性”，但这些属性不仅仅更改appendTo()标记。

更新2:我的项目中包含的库

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

Answer 1

Mapview.js 在顶部附近执行以下操作:

//Locate the current script tag
var scripts = document.getElementsByTagName("script");
var script = scripts[scripts.length - 1];

//If there are missing required parameters do not continue with the script
if (
    !script.hasAttribute('data-location')
    || !script.hasAttribute('data-options')
    || !script.hasAttribute('data-size')
) {
    throw new Error('Missing attributes passed to mapView.js');
}

因此它假设调用它的脚本是当前页面上的最后一个脚本，这几乎肯定是不正确的，因为您调用它的方式不同。随着延迟、异步和动态添加脚本的出现，这种确定哪个脚本是当前脚本的技术已经相当过时了。所以 - 简而言之 - 它可能不适合你!