insertBefore generates "node was not found" error

[masterofzen]

I've been playing around with this for a while. I bet the answer is pretty obvious, but I'm just not seeing it. I'm also reasonably certain I've run into this problem before.

I'm trying to dynamically insert a few nodes into a webpage using insertBefore. Here's the HTML in question. (Yes, I know the HTML is terrible, but I didn't write it and can't edit it, which is why I have to insert things through the DOM instead. Long story.)

[HTML]<div id='paginaMinion' class='mod_profile_display_bottom mod_profile_display module'>
<div class="container">
<div class="title_container">
<h3 class="title">
<span class="title_span">
<a href="http://mipagina.univision.com/janiiita" class="title_span_link">
<div class="title_span_div"></div>
</a>
</span>
<div class="spreader"></div>
</h3>

<div class="spreader"></div>
</div>

<ul>
<a name="massobremi"></a>
<div id="lower_layout">
</div>
<div class="spreader"></div>
<div id="lower_layout2">
</div>
</ul>

<div class="spreader"></div>
</div>
</div>[/HTML]

Now, here's the JavaScript I've inserted after the HTML appears in the document:

var msm = document.getElementById('paginaMinion');
var msmULArr = msm.getElementsByTagName('ul');
var msmUL = msmULArr[0];
var coverDiv = document.createElement('div');
var coverAnchor = document.createElement('a');
coverAnchor.setAttribute('href','http://www.example.com/');
var coverAnchorText = document.createTextNode('Example 1');
coverAnchor.appendChild(coverAnchorText);
var coverText = document.createTextNode('Example 2');
coverDiv.id = 'coverdiv';
var commonBR = document.createElement('br');
coverDiv.appendChild(coverText);
coverDiv.appendChild(commonBR);
coverDiv.appendChild(coverAnchor);
 
msm.insertBefore(coverDiv, msmUL);

The insertBefore causes a "node was not found" error and nothing is inserted into the document. Does anyone have any idea why?

[Logician]

The insertBefore causes a "node was not found" error and nothing is inserted into the document. Does anyone have any idea why?

msm is not the immediate parent of msmUL. Try

msmUL.parentNode.insertBefore(coverDiv, msmUL)

[mrhoo]

<h3>
<span>
<a>
<div></div>
</a>
</span>
<div></div>
</h3>

What is a browser to do- an <h3> is not supposed to contain block elements,
and neither are <span> or <a> elements.

Here is a div inside an <a> inside a <span> inside an <h3>, which also has another <div> after the <a>.
I'm surprised your list isn't in there too. But how is the browser supposed to assemble a DOM view of that?

[masterofzen]

I had no idea you had to reference the immediate parent -- I thought any parent would do. The parentNode solution was a great idea and worked like a charm -- thanks!

I have to work with some pretty badly formed HTML on a day-to-day basis, and a substantial part of my job is making it do things it can't or isn't supposed to with JavaScript. Browsers will always assemble a DOM view of whatever they see -- it just may not be anything remotely like what you'd expect!