When I covered my code to dynamically create passages, I went for the fast solution. In trying to create a way to add passages at run-time, I showed one way to do it, not necessarily the best method. That’s what I found out when I used it for last week’s story Mixed Signals.

What needs to change is, instead of using innerHTML, to switch to innerText/textContent. The reason for this is because, when a browser edits the DOM using innerHTML, it parses the string content as tags. It assumes that you are passing in valid HTML content, not just text.

Tale.prototype.addPassage = function(title,tags,content) {
	var newPassage = document.createElement("div");
	newPassage.id = title;
	newPassage.setAttribute("tiddler",title);
	newPassage.setAttribute("tags",tags);
	newPassage.setAttribute("modifer","twee");

	if(newPassage.innerText) {newPassage.innerText = content;}
	else {newPassage.textContent = content;}

	$("storeArea").appendChild(newPassage);
	this.passages[title] = new Passage(title,$(title));
};

Now, if you want to pass in TiddyWiki code, you can.

tale.addPassage(passageID,"<<addLink 'Make another' '' >>");

For example, the complete code at the bottom of this post demonstrates an endless story which create elements, adds them to the page, and then makes a new index in the Passages array. (Works only in the Jonah Story Format currently.)

The key is in creating a new passage title. They have to be unique per passage, so a random number is added to the end before being placed in the array. However, because it is a random number, the title isn’t as important visually now, so I’ve also included the CSS to remove it from being rendered by the browser.

Source:

:: Start
<<addLink "Make a passage" "" >>

:: script [script]
Tale.prototype.addPassage = function(title,tags,content) {
	var newPassage = document.createElement("div");
	newPassage.id = title;
	newPassage.setAttribute("tiddler",title);
	newPassage.setAttribute("tags",tags);
	newPassage.setAttribute("modifer","twee");

	if(newPassage.innerText) {newPassage.innerText = content;}
	else {newPassage.textContent = content;}

	$("storeArea").appendChild(newPassage);
	this.passages[title] = new Passage(title,$(title));
};

macros['addLink'] = 
{
	handler: function(place, object, parameters)
	{
  var newID = Math.floor(Math.random()*65456);
		tale.addPassage("n"+newID,"","<<addLink 'Make another' '' >>");
		new Wikifier(place, "[["+parameters[0]+"|" + "n" + newID + "]]");
	}
}

:: styles [stylesheet]
.passage .title { display: none }