Macro appending after passage

Authoring Twine
,
1

I’m trying to create a macro that inserts a premade js/css element into the passage, but when I call it, it is appending that element to the end of the page, after the .passage tag. Is there another way I should be appending this so that it gets appended in the place it was called?

Originally I was using this:
document.body.appendChild(ContainerDiv);

Then I was able to get it to work properly by using an empty “anchor” div and appending it like so:
document.getElementById('anchor').append(ContainerDiv)

Is there a more straightforward way to get the object to just be displayed in place, in the location that is was called? I can’t find any info on this anywhere.

2

What are you trying to append?
Because SugarCube has an <<append>> macro buil-in already…

3

Pretty much, I made a macro that creates a cellphone from pure CSS (so I can change the info on the screen without having to make a new image every time) and I’m currently using it to show that the player is getting a phone call. I’m generating the HTML for it via javascript, but I’m unsure how to get it to display in place. What I’d like to happen is that I can just call <<phone 'Name' 'image.jpg'>> and it would just pop up the phone in the location I called it inline, similar to the twinelab speech macro but I couldn’t figure out what part of that script was placing the created div inside the passage.

4

Sheesh I finally figured it out. I needed to use the .wiki() function to append it to the current output buffer. For anyone that stumbles upon this later, this is what my macro looks like:

Macro.add("phone", {
	handler: function () {
		// generate the HTML for the phone
		var phone = createPhone(this.args[0], this.args[1], this.args[2]);
		$(this.output).wiki(phone.innerHTML);
	},
});

Takeaways: (for anyone that stumbles here in the future)

  • .wiki() appends it to the current inline buffer during runtime
  • Must use .innerHTML on phone since it apparently returns an object. Otherwise it’ll just show up inline as [object HTMLDivElement]