InsertAfter bei mehreren Tags benutzten

#1
JAVASCRIPT:
function $(selector) {

var resultObject = {
append: function (element) {
var parser = new DOMParser();
var dos = parser.parseFromString(element, "text/html");

var all = dos.getElementsByTagName("body")[0];


var elemWhichAppend = document.getElementsByClassName("testing");

var children = all.childNodes;


for (var i = 0; i < elemWhichAppend.length; i++) {

var msgContainer = document.createDocumentFragment();
var children = all.childNodes;

for (var child = 0; child < children.length; child++) {

var al = myLo(children[child]);
msgContainer.appendChild(al);
// alert(children[child].nodeName);
}
insertAfter(msgContainer, elemWhichAppend);
}




}
}
return resultObject;
}

function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function myLo(curElem)
{

var whichnodetype;

if (curElem.nodeType == 3)
{
whichnodetype = document.createTextNode(curElem.nodeValue);
}
else
{
var whichnodetype = document.createElement(curElem.nodeName);
}

var children = curElem.childNodes;
for (var child = 0; child < children.length; child++) {
whichnodetype.appendChild(children[child]);
}

return whichnodetype;
}



HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="jqueryjs.js"></script>
</head>
<body>
<h1 class="testing">APPEND</h1>
<p>Hallo, ich bin ein P TAG </p>
<h1 class="testing">APPEND2</h1>

<input type="button" value="append tag/text " onclick="$('.testing').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße');" />
</body>
</html>




Bei meiner Seite insertet er beim ersten h1 alles richtig, beim 2en h1 insert er nur "messi ist scheiße". Das ergibt eigentlich keinen Sinn. Er kommt 2mal richtig in die For schleife rein, aber insert tut er nur beim ersten h1 richtig..