javascript - 如何包装当前但未知的元素

Question

我有一个脚本要提供给客户。客户端可以将其放在 html 正文中的任何位置。它可以放置在 div、td、p 或任何类似的内容之间。

脚本看起来像这样:

<script id="myExample" src="http://www.mydomain.com/example.js" ></script>

现在，在“example.js”中，我想动态包装我的脚本。

我尝试过类似的方法:

// create the container div
$("#myExample").wrap('<div></div>');
document.getElementById("myExample").firstChild.setAttribute("id","myExampleContainer");

...但我收到错误:

TypeError: document.getElementById(...).firstChild is null

可以用div包装当前元素(这是一个js)，并给包装器一个id吗？

更新:请参阅下面 Musa 的回答。

两个可行的解决方案:

// create the container div
$("#myExample").wrap('<div></div>');
document.getElementById("myExample").parentNode.setAttribute("id","myExampleContainer");

...或:

$("#myExample").wrap('<div id="myExampleContainer"></div>');

Answer 1

包装器是 #myExample 的父级而不是子级，因此您必须这样做

document.getElementById("myExample").parentNode.setAttribute("id","myExampleContainer");

http://jsfiddle.net/awz8U/1/
或者只是在 div 中添加 id

$("#myExample").wrap('<div id="myExampleContainer"></div>');

http://jsfiddle.net/awz8U/2/