I'm trying append to the next element of multiple divs. So far I have this:

**HTML**

```
<pre data-color="blue"></pre>
<div class="yellow></div>

<pre data-color="blue"></pre>
<div class="yellow></div>

<pre data-color="blue"></pre>
<div class="yellow></div>

```

After the function runs, the content should look like this:

```
<pre data-color="blue"></pre>
<div class="yellow><p class="content">My content</p></div>

<pre data-color="blue"></pre>
<div class="yellow><p class="content">My content</p></div>

<pre data-color="blue"></pre>
<div class="yellow><p class="content">My content</p></div>

```

This is my function thus far:

```
var blue = document.querySelectorAll("[data-color='blue']");

var next = blue.nextSibling;

for (var i=blue.length; i--;) {
    var insertdiv = document.createElement('p');
    insertdiv.className   = 'content';
    insertdiv.textContent = 'My Content';    

    next[i].parentNode.appendChild(insertdiv, blue[i]);
}

```

Can't get this to work properly though.

**No jQuery please.**