insertBeforeは親子関係でないと使えない

この前、DOMのinsertBeforeで要素を追加しようとしたのですが、なぜかうまくいかず、エラーが出て困ってしまいました。
ただ、最初からエラーが出ていたわけではなく、突然エラーが出るようになったのでさっぱりでした。
しかし、追っていくとDOMで操作しようとしていたHTMLの構造が変化していることに気がつきました。

以前はこのような構造でした。

<!--略-->
<div id="parent">
	<!--ここに入れたい！-->
	<div id="target">hoge</div>
</div>
<!--略-->
<script type="text/javascript">
<!--
var insElem = document.createElement("div");
insElem.id = "inserted";
insElem.innerHTML = "inserted!";
var parPos = document.getElementById("parent");
var basePos = document.getElementById("target");
parPos.insertBefore(insElem,basePos);
//-->
</script>

変更後はこのようになっていました。

<!--略-->
<div id="parent">
	<!--ここに入れたい！-->
	<div id="wrapper">
		<div id="target">hoge</div>
	</div>
</div>
<!--略-->
<script type="text/javascript">
<!--
var insElem = document.createElement("div");
insElem.id = "inserted";
insElem.innerHTML = "inserted!";
var parPos = document.getElementById("parent");
var basePos = document.getElementById("target");
parPos.insertBefore(insElem,basePos);
//-->
</script>

前者はもちろん正しく動きます。
ただ、後者は場所がおかしいものの入る、ということはなくエラーになってしまいます。
子孫関係ではなく、親子関係でないとinsertBeforeが使えないんですね……。
※よく考えれば子孫関係で良ければ適当にbody等を対象に取ってもよくなってしまいますね。

この辺り、JavaScript標準のDOM操作メソッドだけでは結構面倒なのですが、この前jQueryを使ってみたらあまりの簡単さに驚きました。
諸事情で毎回jQueryを使えるわけではないですが、jQuery等のJavaScriptライブラリも勉強して使っていきたいところです。