tutorials.de - InsertAfter bei mehreren Tags benutzen

by SpiceLab

HTML

<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> <span>messi ist scheiße</span>');" />

CSS

.testing * {font-size:.9rem;color:red}

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;
}