Prev: FAQ Topic - My element is named myselect[], how do I access it? (2010-04-09)
Next: FAQ Topic - My element is named myselect[], how do I access it?(2010-04-09)
From: GIAM on 8 Apr 2010 19:33

Hi,

I'm trying to create a dynamic link with javascript. However, I can't
seem to add the link onto the page (at least I assume that is the
problem). Here is the function I use:

function createLink(id)
{

var x = document.getElementById('background');
var newLink = document.createElement('a');
newLink.setAttribute('id',id)
newLink.setAttribute ('href','"javascript:;"');
newLink.setAttribute ('onmousedown', 'toggleDiv(text)');
//alert();
x.appendChild(newLink);
alert(newLink.getAttribute('id'));
alert(newLink.getAttribute('href'));
alert(newLink.getAttribute('onmousedown'));

}

background is just the background div of the page, I also tried
document.body.appendChild but this doesn't work either. I create the
link using a button:

<button onclick="createLink('alink')"> createlink</button>

I also have code to create a dynamic div box which works, using
document.body.appendChild(newdiv).

I'm using IE 7.

Thanks,

GIAM
From: GIAM on 8 Apr 2010 19:37
On Apr 9, 11:33 am, GIAM <gordon.is.a.mo...(a)gmail.com> wrote:
> Hi,
>
> I'm trying to create a dynamic link with javascript. However, I can't
> seem to add the link onto the page (at least I assume that is the
> problem). Here is the function I use:
>
> function createLink(id)
> {
>
> var x = document.getElementById('background');
>         var newLink = document.createElement('a');
>         newLink.setAttribute('id',id)
>         newLink.setAttribute ('href','"javascript:;"');
>         newLink.setAttribute ('onmousedown', 'toggleDiv(text)');
>         //alert();
>         x.appendChild(newLink);
>         alert(newLink.getAttribute('id'));
>         alert(newLink.getAttribute('href'));
>         alert(newLink.getAttribute('onmousedown'));


Silly me, I forgot to put the link text in!

newLink.innerHTML = "thelinkybit";

GIAM
From: Garrett Smith on 8 Apr 2010 20:32
GIAM wrote:
> On Apr 9, 11:33 am, GIAM <gordon.is.a.mo...(a)gmail.com> wrote:
>> Hi,
>>
>> I'm trying to create a dynamic link with javascript. However, I can't
>> seem to add the link onto the page (at least I assume that is the
>> problem). Here is the function I use:
>>

You should be using properties assignment instead of setAttribute. The
code will be shorter (more concise and easier to read) and will avoid
problems with setting event handlers as attributes (does not work
consistently).

There is no good reason to use javascript:; URIs. A safe alternative is
to prevent the default action by using return false, or
event.preventDefault() (w3c DOM) / event.returnValue = false (IE DOM).

http://jibbering.com/faq/#javascriptURI
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/
From: RobG on 9 Apr 2010 00:58
On Apr 9, 10:32 am, Garrett Smith <dhtmlkitc...(a)gmail.com> wrote:
> GIAM wrote:
> > On Apr 9, 11:33 am, GIAM <gordon.is.a.mo...(a)gmail.com> wrote:
> >> Hi,
>
> >> I'm trying to create a dynamic link with javascript. However, I can't
> >> seem to add the link onto the page (at least I assume that is the
> >> problem). Here is the function I use:
[...]
> There is no good reason to use javascript:; URIs.

Yes, and where there is no good reason to have a URI, there is no good
reason to be using an A element at all. In these cases, the usual
reason an A element is used is because the presence of an href
attribute hints that the browser should style it as a link, which
encourages users to click on it.

As the href attribute is superfluous to requirements, it should not be
there at all. The OP should use an appropriate element - say a span,
div or button - and style to look like something that should be
clicked on.


--
Rob
From: Garrett Smith on 9 Apr 2010 01:31
RobG wrote:
> On Apr 9, 10:32 am, Garrett Smith <dhtmlkitc...(a)gmail.com> wrote:
>> GIAM wrote:
>>> On Apr 9, 11:33 am, GIAM <gordon.is.a.mo...(a)gmail.com> wrote:
>>>> Hi,
>>>> I'm trying to create a dynamic link with javascript. However, I can't
>>>> seem to add the link onto the page (at least I assume that is the
>>>> problem). Here is the function I use:
> [...]
>> There is no good reason to use javascript:; URIs.
>
> Yes, and where there is no good reason to have a URI, there is no good
> reason to be using an A element at all. In these cases, the usual
> reason an A element is used is because the presence of an href
> attribute hints that the browser should style it as a link, which
> encourages users to click on it.
>

An A with an href is also focusable.

> As the href attribute is superfluous to requirements, it should not be
> there at all. The OP should use an appropriate element - say a span,
> div or button - and style to look like something that should be
> clicked on.
>

Using a span with a `tabIndex ` will allow the element to be fully
focusable in most recent browsers[MSDN][MDC].

Older browsers, such as Safari 2, for example, do not support `tabIndex`
on arbitrary elements. For browsers that do support `tabIndex`, not all
support the negative index, as specified in HTML 5[HTML5] and
implemented in IE[MSDN].

(HTML 5 states that an element with a negative tabindex is not to be
focused by "sequential navigation" (tabbing)).

In the OP's code, setting event handlers as attributes is a more
significant problem, as that won't work in IE < 8[MSDN].

[MSDN]http://msdn.microsoft.com/en-us/library/ms534654%28VS.85%29.aspx
[MDC]https://developer.mozilla.org/En/DOM/Element.tabIndex
[HTML5]http://www.w3.org/TR/html5/editing.html#attr-tabindex
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/
 |  Next  |  Last
Pages: 1 2 3 4 5
Prev: FAQ Topic - My element is named myselect[], how do I access it? (2010-04-09)
Next: FAQ Topic - My element is named myselect[], how do I access it?(2010-04-09)