almost functional string to element engine (no innerhtml)

**Falkon303** · 03-01-2009, 05:11 PM

Ok, so I started this script, and I hit a wall because I am mentally exhausted right now... The idea is to mimick innerHTML. This script is ugly right now, but somewhat functional, and I believe it has a future....

Basically it works like this - a user will be able to update html similar to the innerhtml method, all css styling, id tags, and everything else included....

Of course it's taking a while to work out, but that's because I am not using php to count elements....it's javascript.

so anyways, a user can add this insiade of an element -
onclick="inner(this.id, '<a href=\'http://www.yahoo.com\'>link</a><div id=\'test\' >huh</div>');"

The Idea being that it's similar to innerhtml in nature. Now of course innerhtml is stupid and unsafe. but I believe the prospect of this function could also provide perhaps a more interesting approach to element creation, being that it would be based on html, and the function itself would simply act as a translator, and perhaps extend to such functions as -
"inner(this.id, someotherid)"

now this would require traversing the DOM and recovering all nodeType, nodeName, values, and atrributes per element, but it might be worth it.

I have yet to look into the "cloneNode", or the cloning functions of javascript... that will be my next thing.

So anyways, here is my code. YES, it's totally horrid looking, but you will not find one innerhtml in there. A hell of a lot of "split"s though. Note: this is not functional at all how I'd like it, but I find it interesting....It splits a string into elemental properties utilizing "split". I am not that good with it yet, but I think it might be a nice solution to some problems.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function inner(elm, html)
{
var a_array = new Array();
strtTags = html.split("<");
for(i=0; i<strtTags.length; i++)
{
inrvals = strtTags[i].split(">");
eltag = inrvals[0].split(" ");
elatt = inrvals[0].split("=");
endtag = elatt[0].split(" ");
a_array[i] = inrvals[1];
if (inrvals[1] == null || inrvals[1] == "") 
{;} else {alert("element value:" + inrvals[1] + "\r\n element type:" + eltag[0] + "\r\nelem attribute:" + endtag[1] + "\r\n elem attr value:" + elatt[1]);
mknew = document.createElement("a");
//mknew.endtag[0] = endtag[1];
document.getElementById(elm).appendChild(mknew);
}
document.getElementById(elm).firstChild.nodeValue = a_array;
}

}
</script>
</head>

<body>
<a style="cursor:pointer;" id="mynode" name="mynode" onclick="inner(this.id, '<a href=\'http://www.yahoo.com\'>link</a><div id=\'test\' >huh</div>');">click me</a>
</body>
</html>

**Twey** · 03-01-2009, 09:42 PM

But why use it and all this nasty parsing code rather than JsonML? It requires working with strings of code, for a start. Also, this approach is terribly slow and probably flawed (HTML requires contextual parsing); I would only use it as a fallback for innerHTML.

**Falkon303** · 03-01-2009, 10:38 PM

Originally Posted by Twey

But why use it and all this nasty parsing code rather than JsonML? It requires working with strings of code, for a start. Also, this approach is terribly slow and probably flawed (HTML requires contextual parsing); I would only use it as a fallback for innerHTML.

It was basically only going to be used as a fallback for innerHTML, but now that I have had some rest and thought about it, I don't even need this.

Technically, it was an attempt to destroy having to type "document.form.element.firstChild.NodeValue/variations" so many times.

A part of me believes it's an extra process to replace an element with another tye of element rather than changing the element nodeName, yet after reading, it's not just as simple as changing the name of somethng, you are actually dealing with creating an entirely new element, which is where the benefit of innerHTML shows in my opinion.

innerHTML is stupid and wrong, but the ability to throw html as a string is pretty useful sometimes imo. I haven't used Json, but I'll look into it. What I am trying to build is an element that changes nodeName onmouseover, and reverts on mouseout, but keeps the same values as the original element. InnerHTML seems the most efficient route.... sadly.

**molendijk** · 03-01-2009, 11:02 PM

Originally Posted by Falkon303

innerHTML is stupid and wrong

Not always, I think. When you use something like document.getElementById('some_div').innerHTML = "<object type='text/html' data='some_file.html' style='...'></object>", then I cannot imagine why innerHTML would be unrelyable, since you insert a file as-a-whole.
In fact, I made a website for someone and used this idea for including a navigation menu (on the client) on each page. (I never had any complaints).

What do you think, Twey?
===
Arie (Molendijk).

**Falkon303** · 03-01-2009, 11:03 PM

Nice point Twey... I think that was just a "I wanna be lazy" tangent honestly.

I actually almost have the script how I'd like it by using the DOM method thanx to people who helped in my last post.

Code:

<script type="text/javascript"> 
function initload(value){ 
if (document.getElementById("bojo").firstChild == null) {;}
else 
{document.getElementById("bojo").removeChild(elOpt);}
elOpt = document.createElement(value);
elOpt.setAttribute("id","my" + value);
elOpt.style.border = "4px solid #cccccc";
elOpt.style.height = "40px";
elOpt.style.width = "40px";
elOpt.onmouseout = function() {initload('div');};
elOpt.onmouseover = function() {initload('textarea');};
document.getElementById("bojo").appendChild(elOpt);
} 
</script> 
<body id="body" onload="initload('div');"> 
<div id="bojo" name="bojo" ></div> 
</body>

It seems to go very slow.... Should I use the display property instead of the actual functionality?

The onmouseover/onmouseout runs like crap... I know I am missing something, I just can't figure out what it is. I am trying to attach an "onmouseout"/over to the element I am creating..... it's not working.

it would be the equivalent to this - http://dynamicdrive.com/dynamicindex15/domroll.htm

except instead of an image changing, it'd be an entirely new element..... I am thinking a procedure like -

/////
<a id="myel" onmouseover = "this.id='fakeid';this.element.display = 'none';showotherel('textarea', 'myel');">illusion with element in html...</a>
/////

perhaps if the element doesn't have to be created, this will run faster, as setting attributes of an existing element may run better than creating a new one.

**molendijk** · 03-01-2009, 11:28 PM

Do you know this article about document.write?
===
Arie.

**Falkon303** · 03-01-2009, 11:48 PM

Finally figured out how to get this working.... All I need to do transfer element.firstChild.nodeValue.

Code:

<textarea id="mytextarea" name="mytextarea" onmouseout="this.style.display = 'none';document.getElementById('myel').style.display = '';" style="display:none;border:1px solid #cccccc;width:100px;height:100px;">illusion with element in html</textarea>

<div id="myel" name="myel" style="border:1px solid #cccccc;width:100px;height:100px;" onmouseover="
document.getElementById('mytextarea').style.display = '';this.style.display = 'none';">illusion with element in html...</div>

Interesting article.... Wierd that he called people hand wavers with no solutions while his solution is an invalid XHTML action - document.write..

I could be missing something, but if document.write is invalid, you can't exactly "fix" it by using it.... I could be sarcastically and cockilly wrong, but everything I have learned about document.write is that it's ... document.wrong

**molendijk** · 03-02-2009, 12:17 AM

Originally Posted by Falkon303

I could be missing something, but if document.write is invalid, you can't exactly "fix" it by using it.... I could be sarcastically and cockilly wrong, but everything I have learned about document.write is that it's ... document.wrong

He doesn't actually use 'documet.write'; he changes it into something else.
===
Arie.

**Falkon303** · 03-02-2009, 12:19 AM

Originally Posted by molendijk

He doesn't actually use 'documet.write'; he changes it into something else.
===
Arie.

Ahh, I should have read closer and kept my mouth shut. That's sick man.

thanx.

I recant my moronic statements. That's what I was trying to do to "innerHTML".

so check this out for the concept of element change (or the illusion) -

Code:

<style type="text/css">
.hiding {display:none;border:1px solid #cccccc;width:100px;height:100px;}
.showing {border:1px solid #cccccc;width:100px;height:100px;}
</style>
<script type="text/javascript">
function rehide(thisel, otherel)
{document.getElementById(thisel).className = 'hiding';
document.getElementById(otherel).className = 'showing';
document.getElementById(otherel).firstChild.nodeValue = document.getElementById(thisel).firstChild.nodeValue;}
</script>
</head>
<body>
<textarea class="hiding" id="mytextarea" name="mytextarea" onmouseout="rehide(this.id, 'myel');" >&nbsp;</textarea>
<div id="myel" name="myel" class="showing" onmouseover="rehide(this.id, 'myatag');">illusion with element in html...</div>
<a style="hiding" href="http://www.google.com" name="myatag" id="myatag" onmouseout="rehide(this.id, 'mytextarea');">&nbsp;</a>
</body>
</html>

Seems nice because you can target what element you want to show/hide...

**Twey** · 03-03-2009, 01:26 AM

He doesn't actually use 'documet.write'; he changes it into something else.

Namely, innerHTML — not much better, really.

Nice point Twey... I think that was just a "I wanna be lazy" tangent honestly.

I actually almost have the script how I'd like it by using the DOM method thanx to people who helped in my last post.

Code:

<script type="text/javascript"> 
function initload(value){ 
if (document.getElementById("bojo").firstChild == null) {;}
else 
{document.getElementById("bojo").removeChild(elOpt);}
elOpt = document.createElement(value);
elOpt.setAttribute("id","my" + value);
elOpt.style.border = "4px solid #cccccc";
elOpt.style.height = "40px";
elOpt.style.width = "40px";
elOpt.onmouseout = function() {initload('div');};
elOpt.onmouseover = function() {initload('textarea');};
document.getElementById("bojo").appendChild(elOpt);
} 
</script> 
<body id="body" onload="initload('div');"> 
<div id="bojo" name="bojo" ></div> 
</body>

Laziness is the mother of invention

You've just gone about it the wrong way in this case. You shouldn't have to write out the calls by hand, but there are better ways than presenting it as a string. See for example this post; using that function, it could be written:

Code:

function initload(value) {
  var bojo = Dom.get("bojo");

  Dom.clear(bojo);

  bojo.appendChild(Dom.create(
    [value,
      {
        id: "my" + value,
        onmouseout: function() { initload('div'); },
        onmouseover: function() { initload('textarea'); }
        style: {
          border: "4px solid #cccccc",
          height: "40px",
          width: "40px"
        }
      }
    ]);
}

Simple, easy, readable, no big strings.

Thread: almost functional string to element engine (no innerhtml)

Thread Tools

Search Thread

almost functional string to element engine (no innerhtml)

The Following User Says Thank You to Twey For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions