DOM error: "node cannot be inserted". Why not?

I am trying to write an editor object, which adds some functionality
and a toolbar to every textarea with a "form-textarea" class. Both FF
and IE generate an error in line 20
(container.appendChild(this.toolbar);) saying "Node cannot be inserted
at the specified point in the hierarchy" code: "3"

I have two questions:
- who would help me with this error
- please provide other feedback about my code, since I want to write a
solid framework

I've pasted all code (including general library functions), to provide
a complete overview.

Any help is greatly appreciated,
Dennis


/********************************** editor code
*******************************/
var Editor = {
version : "1.0 beta",

init : function() {
var textareaNodes = document.getElementsByTagName('textarea');
var thisTextarea, i = 0;
while ((thisTextarea = textareaNodes[i++])) {
if (hasClass(thisTextarea, 'form-textarea')) {
new this.textEditor(thisTextarea);
}
}
},

textEditor : function(textarea) {
this.textarea = textarea;
this.value = textarea.value.replace(/\s+$/g, "");
this.textarea.className = 'editor-textarea';
this.textarea.rows = this.value.split("\n").length;
var container = createNode('div', {
'class' : 'texteditor ' + this.textarea.id}
);
this.toolbar = Editor.textToolbar;
container.appendChild(this.toolbar);
container.appendChild(this.textarea);
this.textarea.parentNode.insertBefore(container, this.textarea);
Editor.detectKey(this.textarea);
this.textarea.focus();
},

detectKey : function(textarea) {
var theHandler = this.handleKey;
if (document.all) textarea.onkeydown = function(e) {
theHandler.call(self, e, textarea);
}
else textarea.onkeypress = function(e) {
theHandler.call(self, e, textarea);
}
},

handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
if (e.keyCode) key = e.keyCode;
else if (e.which) key = e.which - 32;
Editor.growTextarea(textarea);
},

growTextarea : function(textarea) {
var value = textarea.value, newlines = value.split("\n"), i = 0,
rows = 1;
while (newline = newlines[i++]) {
rows += Math.ceil(newline.length / textarea.cols);
}
textarea.rows = rows;
},

textToolbar : function() {
str = createNode('input', {'type' : 'checkbox'});
return str;
}
}

addLoadEvent(function () {
Editor.init();
});

/******************************* library functions
****************************/

function addLoadEvent(func) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldOnload();
func();
}
}
}

function hasClass(el, className) {
return (
el.className &&
el.className.match(new RegExp("\\b" + className + "\\b"))
) ? true : false;
}

function createNode(type, options) {
var el = document.createElement(type);
for (var key in options) {
el.setAttribute(key, options[key]);
}
return el;
}

re: DOM error: "node cannot be inserted". Why not?

On May 14, 10:52 am, dennis.spreng...@gmail.com wrote:I think it is better here to use:

var i = textareaNodes.length;
while (i--) {
thisTextarea = textareaNodes[i];
...
}


Usually I have found that puting assignments inside conditionals is
slower than doing them outside. Also, a plain for loop is probably
more readable for most and just as fast in modern browsers.

Did you mean to call it?

this.toolbar = Editor.textToolbar();

Presumably you want to append whatever is returned by the call to
Editor.textToolbar, which is an input element.

Here is your next problem - this.textarea.parentNode is container (the
line above makes it so), so it is effectively:

container.insertBefore(container, this.textarea)

The first argument to insertBefore should be the node to be inserted
(the new child), container can't be inserted into itself.

<URL: http://www.w3.org/TR/DOM-Level-2-Cor...l#ID-952280727 >



--
Rob

re: DOM error: "node cannot be inserted". Why not?

dennis.sprengers@gmail.com meinte:
What's this document.all check supposed to do? Lets see: IE knows
document.all, Opera knows it, Safari does, Firefox doesn't (IIRC it does
in quirks mode - but since I've never needed and used document.all I
might be wrong). Anyway, why are you assigning the same listener to
different handlers then?
e = e || window.event; does the same.

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

re: DOM error: "node cannot be inserted". Why not?

On May 14, 4:04 pm, Gregor Kofler wrote:<snip>While you are at it, all values of - e - that could result in true for
- e == null - will result in true for - !e -, so whenever the - e ==
null - expression is evaluated the result must always be false, making
the expression redundant and its evaluation a needless runtime
overhead.

Declaring - var e - is pointless as the function's formal parameter -
e - results in the Variable object having an 'e' property by the time
the variable declaration is processed (so it cannot result in the
creation of such a property), and that variable declaration is not
allowed to alter the value of any pre-existing properties of the
Variable object. Making that declaration pointless at best and a
needless runtime overhead at worst.

re: DOM error: "node cannot be inserted". Why not?

Gregor Kofler wrote:More efficient, and recommended:

if (!e) e = window.event;
if (e)
{
// ...
}

The `=' operation performed always only adds needless runtime overhead[tm]
if e == true, and the value assigned, if necessary, should be tested for as
well.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

re: DOM error: "node cannot be inserted". Why not?

Thomas 'PointedEars' Lahn <PointedEars@web.dewrites:
I wouldn't recommend either over the other.

The minuscule difference in execution time is unlikely to be relevant,
since events are typically caused by user interaction, which dwarves
any such small optimizations.

/L 'Premature optimization is the root of all evil'
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: DOM error: "node cannot be inserted". Why not?

On May 15, 2:07 am, Henry <rcornf...@raindrop.co.ukwrote:[...]The above explanation is correct for browsers that conform to the
ECMAScript specification, however for old versions of Safari
(somewhere around 1.0 I think) the declaration with var is required in
this particular case due to a browser bug, though I seem to remember
using:

var e = e || window.event;

The declaration is performed before any code is executed, therefore it
should have zero effect on performance after its initial parsing.


--
Rob

re: DOM error: "node cannot be inserted". Why not?

RobG wrote:I don't follow. Do you mean to say that Safari 1.x did not support named
arguments or did not allow to modify argument values? If so, I would simply
remove this UA from considerations because it is clearly FUBAR.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>