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

Groups > comp.lang.javascript > #15350 > unrolled thread

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

Back to article view | Back to comp.lang.javascript

Contents

  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

#15350 — How to create nested elements with createElement(...)?

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?

Many thanks for any advise,
Tuxedo

[toc] | [next] | [standalone]

#15351

"Tuxedo" <tuxedo@mailinator.com> schreef in bericht 
news:k0bng9$8it$1@news.albasani.net...
> 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?
>

create the div analogous to the way you created the img element.
div.appendChild(img);
document.body.appendChild(div);
Tom 

[toc] | [prev] | [next] | [standalone]

#15352

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);

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#15371

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).

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web