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

Groups > comp.lang.javascript > #15371

Re: How to create nested elements with createElement(...)?

Followups directed to: comp.lang.javascript

Show key headers only | View raw

Andrew Poulos wrote:

> On 14/08/2012 6:19 AM, Tuxedo wrote:
>> This appends an image to the body:
>>
>> function appendElement(){
>>   var img = document.createElement("img");
>>   img.src = 'image.png';
>>   document.body.appendChild(img);
>> }
>>
>> How can the same function be made also to create a <div>, so that the div
>> contains the image, or for a div to be appended to the body and for the
>> image to be appended to appear within the div?
> 
> This would be one way:
> 
> var mydiv = document.createElement("div");
> var myimg = document.createElement("img");
> myimg.src = "image.png";
> mydiv.appendChild(myimg);
> document.body.appendChild(mydiv);

As you need that frequently when avoiding .innerHTML, I have written 
jsx.dom.createElementFromObj() [1]:

  /*
   * Equivalent of
   * document.body.innerHTML += '<div><img src="image.png"></div>'
   */

  var mydiv = jsx.dom.createElementFromObj({
    type: "div",
    childNodes: [
      {
        type: "img",
        properties: {
          src: "image.png"
        }
      }
    ]
  });

  document.body.appendChild(mydiv);

Being recursive, it already supported the creation of a text node (through a 
string-typed object as argument), so I added jsx.dom.createNodeFromObj() as 
alias yesterday.

Also, out of necessity in a commercial project, I tweaked it so that it 
would return a reference to an Array (heretoafter: an Array) of Nodes when 
passed an Array of string-typed values (for text nodes) or other objects 
(for element nodes).  As I result, I added the alias 
jsx.dom.createNodesFromObj(), and jsx.dom.appendChildren() and 
jsx.dom.removeChildren(), which make filling and emptying an element node 
easy:

  /*
   * Equivalent of
   *   parentNode.innerHTML +=
   *     'foo<input type="checkbox" name="bar" value="baz">'¹
   */
  jsx.dom.appendChildren(parentNode, jsx.dom.createNodesFromObj([
    "foo",
    {
      type: "input",
      properties: {
        type: "checkbox",
        name: "bar",
        value: "baz"
      }
    }
  ]));

  // …

  /* Equivalent of parentNode.innerHTML = "" */
  jsx.dom.removeChildren(parentNode, parentNode.childNodes);

Now it strikes me that jsx.dom.appendChildren() should return an Array of 
Nodes created from the passed Array, and jsx.dom.removeChildren() should 
return an Array of removed Nodes.

The methods are not yet namespace-aware.  What do you think?

_______
¹  Note that an element object's properties are _not_ equivalent to that
   element's attributes, although it may appear so in these examples.

[1] 
<http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=/trunk/dom.js>

-- 
When all you know is jQuery, every problem looks $(olvable).

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

Thread

How to create nested elements with createElement(...)? Tuxedo <tuxedo@mailinator.com> - 2012-08-13 22:19 +0200
  Re: How to create nested elements with createElement(...)? "Tom de Neef" <tdeneef@qolor.nl> - 2012-08-13 23:06 +0200
  Re: How to create nested elements with createElement(...)? Andrew Poulos <ap_prog@hotmail.com> - 2012-08-14 07:08 +1000
    Re: How to create nested elements with createElement(...)? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-08-16 03:42 +0200

csiph-web