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++) {
for (var child = 0; child < children.length; child++) {
var al = myLo(children[child]);
insertAfter(al, elemWhichAppend[i]);
}
}
}
}
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;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<h1 class="testing">APPEND</h1>
<p>Hallo, ich bin ein P TAG </p>
<h2 class="testing">APPEND2</h2>
<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>The output should be the list AFTER that the h tag and than the text messi ist scheiße. but at the output the first testing it appends reversed and at te second testing class it appends only the first.