Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #32458

Re: Putting something into DOM without being visible

Show all headers | View raw

Stefan Ram wrote:

> bit-naughty@hotmail.com writes:
>> If someone clicks a button, I want to download stuff with
>> AJAX, and then, I guess, append it to the DOM tree. But I
> 
>   You also might use
> 
> document.createElement
> 
>   to create a DOM fragment,

This creates an _element_, not a “DOM fragment”.

The method you would be looking for then is 
document.createDocumentFragment().

>   append the downloaded material to
>   the DOM fragment and then insert the DOM fragment into the
>   DOM later.

An advantage of an actual document fragment appears to be that you can 
insert subtrees of elements at the same time:

  var fragment = document.createDocumentFragment();

  var div = document.createElement("div");
  div.id = "foo";
  fragment.appendChild(div);
 
  var div2 = document.createElement("div");
  div2.id = "bar";
  fragment.appendChild(div2);

  /* appends div#foo and div#bar to the document body */
  document.body.appendChild(fragment);

So I would suggest to use a document fragment for inserting several sibling 
elements as you would use an Array instance (in other languages: string 
buffer) to concatenate several strings efficiently.  (If you are inserting a 
tree that is based on one element node only, you can indeed just insert that 
element node instead.)

It could also be used as a storage for DOM nodes.  It has several document 
methods like .getElementById() and .querySelector() that would allow one to 
select and even clone specific nodes from it.

>   (DISCLAIMER: I have never done this IIRC, only read
>   about it.)

This works, but if there is the possibility that the document object 
representing the document that the node is being inserted into is different 
from the one from which the node was created, one has to call the target 
document object’s importNode() method before attempting to insert the 
node.

For example:

  var element = document.createElement("foo");
  
  /* 
   * if my.nodeStorage is defined in the parent frameset,
   * and holds a reference to a Map instance
   */
  window.parent.my.nodeStorage.set("foo", element);

  /* later */
  var foreignNode = window.parent.my.nodeStorage.get("foo");
  var importedNode = document.importNode(foreignNode, true);
  document.body.appendChild(importedNode);

<https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Putting something into DOM without being visible bit-naughty@hotmail.com - 2017-02-02 11:35 -0800
  Re: Putting something into DOM without being visible Ben Bacarisse <ben.usenet@bsb.me.uk> - 2017-02-02 20:01 +0000
  Re: Putting something into DOM without being visible JJ <jj4public@vfemail.net> - 2017-02-03 17:41 +0700
    Re: Putting something into DOM without being visible "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-03 12:57 +0100
  Re: Putting something into DOM without being visible Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-02-03 13:22 +0100
  Re: Putting something into DOM without being visible bit-naughty@hotmail.com - 2017-02-05 05:03 -0800
    Re: Putting something into DOM without being visible "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-05 19:14 +0100

csiph-web