f



Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)?

span or div. Or finding x, y coordinates and then placing a new element at such coordinates is the only option to do it? 
Table's TR seems one option.

Thanks.
0
justaguy
11/16/2016 2:04:56 AM
comp.lang.javascript 38370 articles. 0 followers. javascript4 (1315) is leader. Post Follow

6 Replies
109 Views

Similar Articles

[PageSpeed] 24

On Tuesday, November 15, 2016 at 8:05:03 PM UTC-6, justaguy wrote:
> span or div. Or finding x, y coordinates and then placing a new element at such coordinates is the only option to do it? 
> Table's TR seems one option.

For once in your life in this group, stop putting half of your question in the subject line and nowhere else. 
0
Michael
11/16/2016 7:49:56 AM
"Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 16 Nov 2016 in
comp.lang.javascript: 

> On Tuesday, November 15, 2016 at 8:05:03 PM UTC-6, justaguy wrote:
>> span or div. Or finding x, y coordinates and then placing a new element
>> at such coordinates is the only option to do it? Table's TR seems one
>> option. 
> 
> For once in your life in this group, stop putting half of your question
> in the subject line and nowhere else. 
> 

Hear, hear!


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
11/16/2016 10:07:06 AM
On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
> span or div. Or finding x, y coordinates and then placing a new element at
> such coordinates is the only option to do it? 
> Table's TR seems one option.

There's no quick/simple way.
If you just want to do everything as simple as possible, use a library.
0
JJ
11/16/2016 12:05:46 PM
JJ wrote:
^^
Your real name belongs there.

> On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
>> [Is there a quick way (simple syntax) to place a new DOM element 
>> vertically below instead of Horizontal (to the right)?]
>> span or div. Or finding x, y coordinates and then placing a new element
>> at such coordinates is the only option to do it?
>> Table's TR seems one option.
> 
> There's no quick/simple way.

IBTD.

> If you just want to do everything as simple as possible, use a library.

This problem can probably be solved using CSS only:

  .foo {
    position: relative;
  }

  .foo .bar {
    position: absolute; /* or “fixed” */
    bottom: 0;
  }

Scripting it would not require a library:

  ancestor.style.position = "relative";

  var element = document.createElement("baz");
  element.style.position = "absolute"; /* or "fixed" */
  element.style.bottom = "0";
  element.appendChild(document.createTextNode("blub"));

  parentNode.appendChild(element);

(possibility: ancestor === parentNode)

Alternatively, one can set the “className” property of the relevant element 
objects, or use the “classList” property to add() class names, and apply the 
stylesheet above by making it the content of a newly created and inserted 
“style” element:

  var style = document.createElement("style");
  style.type = "text/css";
  style.appendChild(document.createTextNode(".foo …"));

  (document.head || document.getElementsByTagName("head")[0])
    .appendChild(style);

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.
0
Thomas
11/16/2016 12:38:54 PM
On Wednesday, November 16, 2016 at 7:39:00 AM UTC-5, Thomas 'PointedEars' L=
ahn wrote:
> JJ wrote:
> ^^
> Your real name belongs there.
>=20
> > On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
> >> [Is there a quick way (simple syntax) to place a new DOM element=20
> >> vertically below instead of Horizontal (to the right)?]
> >> span or div. Or finding x, y coordinates and then placing a new elemen=
t
> >> at such coordinates is the only option to do it?
> >> Table's TR seems one option.
> >=20
> > There's no quick/simple way.
>=20
> IBTD.
>=20
> > If you just want to do everything as simple as possible, use a library.
>=20
> This problem can probably be solved using CSS only:
>=20
>   .foo {
>     position: relative;
>   }
>=20
>   .foo .bar {
>     position: absolute; /* or =E2=80=9Cfixed=E2=80=9D */
>     bottom: 0;
>   }
>=20
> Scripting it would not require a library:
>=20
>   ancestor.style.position =3D "relative";
>=20
>   var element =3D document.createElement("baz");
>   element.style.position =3D "absolute"; /* or "fixed" */
>   element.style.bottom =3D "0";
>   element.appendChild(document.createTextNode("blub"));
>=20
>   parentNode.appendChild(element);
>=20
> (possibility: ancestor =3D=3D=3D parentNode)
>=20
> Alternatively, one can set the =E2=80=9CclassName=E2=80=9D property of th=
e relevant element=20
> objects, or use the =E2=80=9CclassList=E2=80=9D property to add() class n=
ames, and apply the=20
> stylesheet above by making it the content of a newly created and inserted=
=20
> =E2=80=9Cstyle=E2=80=9D element:
>=20
>   var style =3D document.createElement("style");
>   style.type =3D "text/css";
>   style.appendChild(document.createTextNode(".foo =E2=80=A6"));
>=20
>   (document.head || document.getElementsByTagName("head")[0])
>     .appendChild(style);
>=20

Great idea of using CSS, thanks, and I just realized a very simple way to d=
o it vertical at the left margin would be a simple DIV tag.  However, the o=
bject is in the middle of the screen DIV tag wouldn't suffice to create a n=
ew element right below the current object.
0
justaguy
11/17/2016 2:18:12 AM
On Wednesday, November 16, 2016 at 7:05:54 AM UTC-5, JJ wrote:
> On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
> > span or div. Or finding x, y coordinates and then placing a new element at
> > such coordinates is the only option to do it? 
> > Table's TR seems one option.
> 
> There's no quick/simple way.
> If you just want to do everything as simple as possible, use a library.

Like jQuery, how do we do this with jQuery?  Thanks.
0
justaguy
11/17/2016 2:18:58 AM
Reply: