add div

function addadiv(specs) {
//var specsa = specs.split(";")
// target:id;relationship:%orpx;left:n;top:n;width:n;height:n or
// id*target*%orpx*relationship*n*left*n*top*n*width*n*height*
// position,target,relationship,left,top,width,height,background,color
var id = getvalue("id",specsa)
var target = getvalue("target",specsa)
if (target === "window.document.body") {target = window.document.body}
else {target = document.getElementById(getvalue(target)}
var position = "position:" + position + ";"
var relationship = getvalue("relationship",specsa)
var left = "left:" + getvalue("left",specsa) + relationship + ";"
var top = "top:" + getvalue("top",specsa) + relationship+ ";"
var width = "width" + getvalue("width",specsa) + relationship+ ";"
var height = "height" + getvalue("height",specsa) + relationship+ ";"
var style = position + left + top + width + height
var div = '<div id="' + id + '" style="' + style + '"></div>'
target.innerHTML = target.innerHTML + div}


function getvalue(attributename,specsa) {function getpair(attributename,specsa) {
for (var i = 0; i < specsa.length; i = i + 1) {var pair = specs[i]; var paira = pair.split[":"]
if (paira[0] === attributename) {return paira}}}return paira[1]}


It turns out we want to add a div that looks like this:

<div id="thisid" style="thisstyle"><div id="thisidcontent" class="divcontent"></div>
<div id="thisideditlink" class="editlink" onmouseover="edite('thisid')"></div></div>

function addadiv(specsa) {
var thediv = addshell(specs)
thediv = thediv + addcontentshell(specs)
thediv = thediv + addeditlink(specs) + '</div>'


adddiv*action*specs*addition*addimage*action*specs*addition*addlink*action*specs

from the above we can extract an array of actions, each in the form action*action*specs

var pagestring = "adddiv*action*specs*addition*addimage*action*specs"
var pagearray = pagestring.split("*addition*")

<div id="thepagestring"></div>

var thepagestring = document.getElementById("thepagestring")
buildthepage(thepagestring)

function buildthepage(thepagestring) {
var thepagearray = thepagestring.split("*addition*")
for (var i = 0; i < thepagearray.length; i = i + 1) {
addtheelement(thepagearray[i])}}

function addtheelement(elementstring) {
var theelementarray = elementstring.split("*action*")
var theaction = theelementarray[0]
var thespecs = theelementarray[1]
if (theaction === "adddiv") {adddiv(thespecs)}
if (theaction === "addimage") {addimage(thespecs)}
if (theaction === "addlink") {addlink(thespecs)}}

We are going to create a page with an input element and a build the page link ... and nothing else. We are then going to paste a page string into the input, and click the link to call the build the page function. The page string lists additions to the page, and the build the page function will iterate through the additions, adding each specified elements, until all the specified elements have been added, thus building the complete page.

Actually, there's something else: the new element link, which calls the new element function. New element adds the new element to the page and adds its specification to the page string. And there's a delete element function, which deletes an element and adds a delete element specification to the page string. Hmm, that last one could be tricky.

More trickyness: while we can add elements, we can't add JavaScript this way. We can add elements that call functions, but either the function has to already be part of the page or we have to separately add them to the page. In the latter case, after adding the function we would need to reload the page and then reload the page string.

We could make changes to the DOM, then save the DOM and reload it, using the kind of procedure described here, and dispense with the page string. This is to say that one function of the page string is saving changes between sessions, but the page string is not essential for that purpose. The essential purpose of the page string is undo. To build the page from the page string we step through a series of additions. To step back through the history of the page, we can just treat each addition specified as a deletion. As long as additions are always made at the end of the inner HTML of an element and we step through from later to earlier one step at a time, this is trouble free. As noted, if we want to arbitrarily remove an element ... it gets slightly tricky. I'll worry about that later.

Oh, I'm noticing some other functions, or action specifications, that are needed. In fact, I'm noticing that calling each action in the page string an addition won't work. The page string is a list of actions, some of which are additions, and others of which are not additions. The thing is, I like calling the name of an action *action*, so, name*action*specs can be split with .split("*action*") to get the action name and the action specs. I'll call each listing in the page string an *act*, so now the page string format will be action*action*specs*act*action*action*specs.

Additional actions are edit ... well, let's look at that one. Maybe there are three kinds of actions, additions, deletions, and edits.