It looks like you're new here. If you want to get involved, click one of these buttons!
prerender["addSomethingToDom"] = function (content) { if (tags().contains("dynamic")) { var child = "<div class='game' id='one'></div>"; var grandchild = "<div class='game2' style='width:20px;height:20px;background:white' id='two'></div>"; $(content).append(child); var target; target = document.getElementById('one'); //target not defined... $(target).append(grandchild); //but if we wait 10 ms it works waitForElement('#one',function(){ target = document.getElementById('one'); $(target).append(grandchild); }); } }
$('#main-div').mouseover(function() { var child = "<div class='game' id='one'>Dynamic!</div>"; var grandchild = "<div class='game2' style='width:20px;height:20px;background:red' id='two'></div>"; var grandgrandchild = "<div class='game3' style='width:40px;height:20px;background:green' id='three'></div>"; $('#main-div').append(child); var target; target = document.getElementById('one'); $(target).append(grandchild); target = document.getElementById('two'); $(target).append(grandgrandchild); });
Comments
http://www.vairix.com/blog/jquery-append-into-heavy-loaded-dom-trees
So nothing specific to Twine/Sugarcube. My solution at the moment is:
Edit: Can someone please comment on this so I can mark as answered?
Because you are not appending it to the DOM. The content parameter of prerender task callbacks is a reference to the render buffer, which is not part of the DOM. The contents of the render buffer are not appended to the DOM until shortly before postdisplay tasks are invoked.
Instead of the following:
You could simply use jQuery:
Or continue mixing the native DOM API with jQuery
I think exactly one person within the linked SO questions actually knew what they were talking about—which is that the DOM is not something you can expect immediate answers from. Regardless, neither that link, nor the linked SO questions, have anything to do with your issue.
The content variable contains the generated HTML output that will be added to the page's DOM at a later point in SugarCube passage render cycle. You are adding your #one element to content so that it will also be rendered at the same time as the current passage's other content.
You are searching the current page's DOM (eg. document.getElementById('one'); ) for your #one element before it has been actually added to current page, which is why you are not finding it.
Your delayed search works because by the time it is triggered SugarCube's passage render cycle has completed and the page's DOM has been updated to include the new content.
Thank you for pointing that out.
Regarding my question - I'm immenesly greatful to both of you for detailed explanation. I hope I can repay by providing many great games for the community.