如何包装当前但未知的元素答案

【问题标题】：how to wrap present but unknown element如何包装当前但未知的元素
【发布时间】：2013-06-05 08:10:30
【问题描述】：

我有一个给客户的脚本。客户端可以将其放在其 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>');

【问题讨论】：

你真的希望脚本标签有子元素吗？
点了。我将纠正我的问题和答案。我说错了。

标签： javascript jquery wrapper

【解决方案1】：

应该是childNodes 而不是firstChild：

document.getElementById("myExample").childNodes[ 0 ].setAttribute...

但不要忘记检查父节点是否有子节点：

if( document.getElementById("myExample") && document.getElementById("myExample").childNodes.length ) {
    // some stuff here...
}

【讨论】：

#myExample 是脚本节点，它没有任何子节点。
是的，我尝试过的永远不会奏效。我将根据给出的答案和 cmets 更新我为纠正此问题所做的工作。

【解决方案2】：

$("myExample").wrap($("<div/>", { id: "myExampleContainer" }));

【讨论】：

【解决方案3】：

包装器是#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/

【讨论】：

你完全正确。谢谢你。鉴于我所说的，另一个答案没有错。但你的答案是有效的。