insertAfter object elelment

Hint: Wanneer je een stuk HTML *na* een button wilt hebben moet je het aan het bovenliggende element appenden en niet aan de button.

Hint: Wanneer je een stuk HTML *na* een button wilt hebben moet je het aan het bovenliggende element appenden en niet aan de button.

Maar daar is de insertAfter toch voor. het moet als siblings ongevoerd worden.
bovenliggend kan een parent zijn of een bovenliggende sibling. Zonder details is het nogal onduidelijk hoe je dit beschrijft.
Als je even goed leest, dan lees je dat het gewoon werkt als ik het zonder objecten doe, maar op deze wijze lukt het niet.

Nog een herhaling:

            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon);

deze bovenstaande code maakt de button aan.

NAAST deze button (sibling) wil ik bijv: <p>Test</p> plaatsen

$( "<p>Test</p>" ).insertAfter( upvoteEl );

dit is wat niet werkt.

UPDATE

Mijn code was gewoon goed, maar het werkt alleen als ik een timeout erin plaats.

setTimeout(function() {
   $( "<span>Test</span>" ).insertAfter( upvoteEl );
}, 1250);

maar als ik hem nested als child in button wil hebben, doet hij het wel zonder timeout:

            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon).append($('<span/>', {
                text: commentModel.upvoteCount,
                'class': 'upvote-count'
			}));

Hoe zorg ik ervoor dat ik code kan invoeren zonder timeout en niet als child van de button?

UPDATE

ik heb een hacky oplossing,

var checkExist = setInterval(function() {
   if (upvoteEl.length) {
      console.log("Exists!");
	   $(upcount).insertAfter( upvoteEl );
      clearInterval(checkExist);
   }
}, 100); // check every 100ms

is er een betere manier?

Je append de icon aan de button en de span aan de icon beide aan de button.

Waarom niet gewoon een simpele HTML snippet in JS in plaats van proberen HTML te bouwen met JS?

Wat je wss wilt:
var button = ...
button.append(jeIconHiero)
button.insertAfter(jeSpanHiero)

Maar een simpele HTML snippet is wellicht beter leesbaar?

omdat ik ik een script http://viima.github.io/jquery-comments/ aanpas en die is zo geschreven,
vele dependancies, dus grote kans is als ik dit hier aanpas, vele andere dingen niet werken, dus ik probeer hun stijl aan te houden.

Of wellicht mis ik iets? hoe bedoel je precies met alleen JS?

x.append = voeg achteraan toe IN element x
x.insertAfter = voeg toe NA element x

Mogelijk ben je er al door de tweede append te veranderen in insertAfter?

EDIT Maar dan wel met chaining. Wat jij doet in je initiële codefragment is:

var bla = button.append(...)
bla.append(...)

Maar die eerste append(...) is een callback-functie, dus bla.append(...) wordt al uitgevoerd terwijl bla nog gecreëerd wordt.

Doe dus alles na elkaar:
var bla = button
bla.append(...)
bla.insertAfter(...)

Of alles tegelijkertijd:
var bla = button.append(...).insertAfter(...)

Maar geen mengvorm want dat gaat geheid mis. Bij de aanroep van een callback-functie gaat alle code NA deze callback-functie DIRECT door, je hebt dan dus als het ware twee "code-threads" die tegelijkertijd worden uitgevoerd. Je kunt dan niet voortbouwen op iets wat mogelijk nog niet klaar (in uitvoering) is.

Of alles tegelijkertijd:
var bla = button.append(...).insertAfter(...)


Dit heb ik al geprobeerd in een eerder stadium en werkt niet, dat was ook de reden waarom ik hem hier post:

	var upcount = $('<span/>', {
                text: commentModel.upvoteCount,
                'class': 'upvote-count'
	});


            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon).insertAfter(upcount);

werkt dus niet, hij word niet aangemaakt.
. Geen foutmeldingen ook. Maar denk dat het element daarvoor bij append nog niet gemaakt is, want met een interval werkt het alleen.

Uhm, heb je dit hele gedoe wel in een $().ready(function() { ... }) blok staan?

jazeker wel.
maar goed het werkt allemaal wel goed met een interval lijkt het. Is dit wel betrouwbaar?

Als dit een standaard brok functionaliteit is, heeft dat ding dan geen hooks/callbacks of wat dan ook waar je op in kan haken, oftewel, doe je je aanpassingen wel op de Goede Manier?

Zo'n timeout lijkt mij een kunstgreep, en gaat mogelijk ook niet altijd werken als er een hickup in het netwerk zit waardoor dingen langer duren.

En als je hier geen custom code op kunt schrijven is dat ding een baksteen, of was het nooit de bedoeling dat dit uberhaupt kon.