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

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • dennis.sprengers@gmail.com

    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.appe ndChild(this.to olbar);) 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.getEle mentsByTagName( 'textarea');
    var thisTextarea, i = 0;
    while ((thisTextarea = textareaNodes[i++])) {
    if (hasClass(thisT extarea, 'form-textarea')) {
    new this.textEditor (thisTextarea);
    }
    }
    },

    textEditor : function(textar ea) {
    this.textarea = textarea;
    this.value = textarea.value. replace(/\s+$/g, "");
    this.textarea.c lassName = 'editor-textarea';
    this.textarea.r ows = this.value.spli t("\n").lengt h;
    var container = createNode('div ', {
    'class' : 'texteditor ' + this.textarea.i d}
    );
    this.toolbar = Editor.textTool bar;
    container.appen dChild(this.too lbar);
    container.appen dChild(this.tex tarea);
    this.textarea.p arentNode.inser tBefore(contain er, this.textarea);
    Editor.detectKe y(this.textarea );
    this.textarea.f ocus();
    },

    detectKey : function(textar ea) {
    var theHandler = this.handleKey;
    if (document.all) textarea.onkeyd own = function(e) {
    theHandler.call (self, e, textarea);
    }
    else textarea.onkeyp ress = 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.growText area(textarea);
    },

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

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

    addLoadEvent(fu nction () {
    Editor.init();
    });

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

    function addLoadEvent(fu nc) {
    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.ma tch(new RegExp("\\b" + className + "\\b"))
    ) ? true : false;
    }

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

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

    On May 14, 10:52 am, dennis.spreng.. .@gmail.com wrote:
    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.appe ndChild(this.to olbar);) 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.getEle mentsByTagName( 'textarea');
    var thisTextarea, i = 0;
    while ((thisTextarea = textareaNodes[i++])) {
    I think it is better here to use:

    var i = textareaNodes.l ength;
    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.

    if (hasClass(thisT extarea, 'form-textarea')) {
    new this.textEditor (thisTextarea);
    }
    }
    },
    >
    textEditor : function(textar ea) {
    this.textarea = textarea;
    this.value = textarea.value. replace(/\s+$/g, "");
    this.textarea.c lassName = 'editor-textarea';
    this.textarea.r ows = this.value.spli t("\n").lengt h;
    var container = createNode('div ', {
    'class' : 'texteditor ' + this.textarea.i d}
    );
    this.toolbar = Editor.textTool bar;
    Did you mean to call it?

    this.toolbar = Editor.textTool bar();

    container.appen dChild(this.too lbar);
    Presumably you want to append whatever is returned by the call to
    Editor.textTool bar, which is an input element.

    container.appen dChild(this.tex tarea);
    this.textarea.p arentNode.inser tBefore(contain er, this.textarea);
    Here is your next problem - this.textarea.p arentNode is container (the
    line above makes it so), so it is effectively:

    container.inser tBefore(contain er, 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

    Comment

    • Gregor Kofler

      #3
      Re: DOM error: &quot;node cannot be inserted&quot;. Why not?

      dennis.sprenger s@gmail.com meinte:
      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.appe ndChild(this.to olbar);) 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
      >
      >
      detectKey : function(textar ea) {
      var theHandler = this.handleKey;
      if (document.all) textarea.onkeyd own = function(e) {
      theHandler.call (self, e, textarea);
      }
      else textarea.onkeyp ress = function(e) {
      theHandler.call (self, e, textarea);
      }
      },
      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?
      handleKey : function(e, textarea) {
      if (!e || e == null) var e = window.event;
      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

      Comment

      • Henry

        #4
        Re: DOM error: &quot;node cannot be inserted&quot;. Why not?

        On May 14, 4:04 pm, Gregor Kofler wrote:
        dennis.spreng.. .@gmail.com meinte:
        <snip>
        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?
        >
        > handleKey : function(e, textarea) {
        > if (!e || e == null) var e = window.event;
        >
        e = e || window.event; does the same.
        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.

        Comment

        • Thomas 'PointedEars' Lahn

          #5
          Re: DOM error: &quot;node cannot be inserted&quot;. Why not?

          Gregor Kofler wrote:
          dennis.sprenger s@gmail.com meinte:
          > handleKey : function(e, textarea) {
          > if (!e || e == null) var e = window.event;
          >
          e = e || window.event; does the same.
          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

          Comment

          • Lasse Reichstein Nielsen

            #6
            Re: DOM error: &quot;node cannot be inserted&quot;. Why not?

            Thomas 'PointedEars' Lahn <PointedEars@we b.dewrites:
            Gregor Kofler wrote:
            >e = e || window.event; does the same.
            >
            More efficient, and recommended:
            >
            if (!e) e = window.event;
            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/rasterTriangleD OM.html>
            'Faith without judgement merely degrades the spirit divine.'

            Comment

            • RobG

              #7
              Re: DOM error: &quot;node cannot be inserted&quot;. Why not?

              On May 15, 2:07 am, Henry <rcornf...@rain drop.co.ukwrote :
              On May 14, 4:04 pm, Gregor Kofler wrote:
              >
              dennis.spreng.. .@gmail.com meinte:
              <snip>
              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?
              >
              handleKey : function(e, textarea) {
              if (!e || e == null) var e = window.event;
              [...]
              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.
              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

              Comment

              • Thomas 'PointedEars' Lahn

                #8
                Re: DOM error: &quot;node cannot be inserted&quot;. Why not?

                RobG wrote:
                On May 15, 2:07 am, Henry <rcornf...@rain drop.co.ukwrote :
                >On May 14, 4:04 pm, Gregor Kofler wrote:
                >>dennis.spreng ...@gmail.com meinte:
                >>> handleKey : function(e, textarea) {
                >>> if (!e || e == null) var e = window.event;
                [...]
                >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.
                >
                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, [...]
                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$8 300dec7@news.de mon.co.uk>

                Comment

                Working...