Problems with dynamic link creation

[GIAM]

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

 

[GIAM]

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

 

[Garrett Smith]

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

 

[RobG]

[...]
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.

 

[Garrett Smith]

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(VS.85).aspx
[MDC]https://developer.mozilla.org/En/DOM/Element.tabIndex
[HTML5]http://www.w3.org/TR/html5/editing.html#attr-tabindex

 

[RobG]

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

But A element can receive focus, which is usually important for UI
controls. SPAN can not receive focus (unless, IIRC, assigned tabIndex
property, in a non-standard manner).

Then, as suggested, a button element can be used, which has default
styling to encourage clicking, more closely represents the
functionality the OP seems to want, allows focus and tabindex and can
(in most modern browsers) can have its appearance styled to match a UI
theme.

 

[SAM]

Le 4/9/10 8:02 AM, kangax a écrit :

Fair enough, except that styling buttons is painful. For example, I
don't think it's possible to apply "text-decoration: underline" to a

??? strange asking ? ! underlined button would disturb me, sure !

button in FF.

for me the best behaviour is to leave the system drawing the buttons,
the user well see what they are

And :hover won't work with it in IE6.

as you'r asking in a JavaScript group, certainly you can set a bit of
code to help this poor IE ?

IE = false; /*@cc_on IE=true; @*/

Those are 2 simple
things needed to emulate standard anchor styling/behavior, and both are
problematic.

As IE doesn't know what could be "standards"

<!--[if IE]><a href="#" onclick="return false" class="but"><![endif]-->
<button class="but" onclick="doIt()">do it</button><!--[if
IE]></a><![endif]-->


a.but,
button.but { color:green; border: 3px outset; text-decoration:none }
a.but:hover,
button.but:hover { color:red; border: 3px inset; }
a.but button.but,
a.but:hover button.but { border: none; margin:2px }

 

[Thomas 'PointedEars' Lahn]

GIAM wrote:
GIAM wrote:
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.

True, but where there is no hyperlink, a :link-type element should not be
used. An INPUT[type=button] or BUTTON element should be used here instead.

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 [...]

.... be not Valid:

<http://www.w3.org/TR/html401/struct/global.html#edef-SPAN>


PointedEars

 

[Thomas 'PointedEars' Lahn]

Fair enough, except that styling buttons is painful. For example, I
don't think it's possible to apply "text-decoration: underline" to a
button in FF.

It is possible in Iceweasel 3.5.9 for INPUT[type=button] elements with one
of the following `display' values:

* block
* inline-block
* list-item
* table-cell
* table-caption

It is also possible with the BUTTON element when you format one of its
inline child elements, like SPAN.

And :hover won't work with it in IE6.

As with a lot of other elements.

Those are 2 simple things needed to emulate standard anchor
styling/behavior, and both are problematic.

It is not a _link_ (you are confusing links and anchors), so there is no
reason it needs to work like one.


PointedEars

 

[Thomas 'PointedEars' Lahn]

That's a much better option, yes.

Depends. The BUTTON element needs to be supported then.

Link? Where did I say link?

You did not, but meant it, and that is the problem.

I'm talking about creating UI control that's supposed to look like a
standard anchor,

An anchor is not supposed to look like anything. You want to get informed
what an anchor is, and what a (hyper)link is. (Semantically it makes no
sense that both links and anchors are created with the same element type.
Perhaps TBL thought that this would make the connection between link and
anchor better understandable; however, it has in fact caused more trouble
than it is worth: you cannot use a standalone `a' CSS element selector to
only style textual hyperlinks, and you cannot nest anchors and links in
HTML.)

However, when something looks like a link that is none, an important rule
of UI design has been violated. The *affordance* of an item should be
clear: when it looks like a link it should cause navigation like a link;
when it looks like a button it should cause an action like a button.

and partially behave like one (i.e. change presentation in
hover/focus/active states).

But that is not necessary.


PointedEars

 

[Garrett Smith]

[...]

Using a span with a `tabIndex ` will [...]

... be not Valid:

<http://www.w3.org/TR/html401/struct/global.html#edef-SPAN>

For HTML 4, there is no tabIndex on the SPAN.

However, keep in mind that this is about "dynamic link creation"; the
use of a `tabIndex` property I suggested is not an HTML attribute.

 

[Thomas 'PointedEars' Lahn]

RobG wrote:
Garrett Smith wrote:
GIAM wrote:
GIAM wrote:

[...]

Using a span with a `tabIndex ` will [...]

... be not Valid:

<http://www.w3.org/TR/html401/struct/global.html#edef-SPAN>

For HTML 4, there is no tabIndex on the SPAN.

However, keep in mind that this is about "dynamic link creation"; the
use of a `tabIndex` property I suggested is not an HTML attribute.

Objects implementing the HTMLElement interface which represent the
SPAN/span element, are not supposed to have a `tabIndex' property either,
of course. That property is only supposed to be available on objects
implementing one of the HTMLSelectElement, HTMLInputElement,
HTMLTextAreaElement, HTMLButtonElement, HTMLAnchorElement,
HTMLObjectElement or HTMLAreaElement interfaces.

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037>

It is true that the property is available on objects representing SPAN/span
elements in two implementations. But the result is proprietary, not
interoperable behavior, nothing that should be relied upon on the Web.


PointedEars

 

[Garrett Smith]

Garrett Smith wrote:
RobG wrote:
Garrett Smith wrote:
GIAM wrote:
GIAM wrote: [...]
Using a span with a `tabIndex ` will [...]
... be not Valid:

<http://www.w3.org/TR/html401/struct/global.html#edef-SPAN>

For HTML 4, there is no tabIndex on the SPAN.

However, keep in mind that this is about "dynamic link creation"; the
use of a `tabIndex` property I suggested is not an HTML attribute.

Objects implementing the HTMLElement interface which represent the
SPAN/span element, are not supposed to have a `tabIndex' property either,
of course. That property is only supposed to be available on objects
implementing one of the HTMLSelectElement, HTMLInputElemFent,
HTMLTextAreaElement, HTMLButtonElement, HTMLAnchorElement,
HTMLObjectElement or HTMLAreaElement interfaces.

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037>

While it is true to say that such objects are not required to have a
`tabIndex` property, it is not correct to say that such objects should
not have a `tabIndex` property. IOW, it is not forbidden. Browsers can
and will add properties to various objects.

IE has a currentStyle property, Opera adds to that a `posTop` property,
and so on. The list of things that exist that are non standard is endless.

Generally, non-standard features should be avoided when there are
standard features available.

In this case, the feature is widely implemented, is part of a working
draft (HTML5). The closest standard alternative is to use an `a`
element, but that has drawbacks. For example, it affects the status bar,
and to prevent the link action, the event must be canceled in some way.

It is true that the property is available on objects representing SPAN/span
elements in two implementations. But the result is proprietary, not
interoperable behavior, nothing that should be relied upon on the Web.

Either you're not counting right or you didn't test in enough
implementations. Kangax already mentioned which browser versions have
`tabIndex` on arbitrary elements.

I do not completely agree with your conclusion that it should not be
relied upon on the web.

The `tabIndex` property can cause elements in more recent browsers to
become focusable. It is not as reliable as using `a`, but it is better
than nothing at all because it is easy to use, it can help a11y, where
supported, and where not supported, is unlikely to have any effect at all.

 

[Garrett Smith]

[...]

Either you're not counting right or you didn't test in enough
implementations. Kangax already mentioned which browser versions have
`tabIndex` on arbitrary elements.

Correction: The set browsers that support tabIndex on this thread has
been published includes:

Safari up to as late as 3.2.1
Not Opera < 9.5 (It works in Opera 9.5+, in context)
IE4+
FF 1.5

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:
Garrett Smith wrote:
RobG wrote:
Garrett Smith wrote:
GIAM wrote:
GIAM wrote:
[...]
Using a span with a `tabIndex ` will [...]
... be not Valid:

<http://www.w3.org/TR/html401/struct/global.html#edef-SPAN>
For HTML 4, there is no tabIndex on the SPAN.

However, keep in mind that this is about "dynamic link creation"; the
use of a `tabIndex` property I suggested is not an HTML attribute.

Objects implementing the HTMLElement interface which represent the
SPAN/span element, are not supposed to have a `tabIndex' property
either, of course. That property is only supposed to be available on
objects implementing one of the HTMLSelectElement, HTMLInputElemFent,
HTMLTextAreaElement, HTMLButtonElement, HTMLAnchorElement,
HTMLObjectElement or HTMLAreaElement interfaces.

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037>

While it is true to say that such objects are not required to have a
`tabIndex` property, it is not correct to say that such objects should
not have a `tabIndex` property.

I did not say that.

IOW, it is not forbidden.

I did not say that either. You want to learn to read.

Browsers can and will add properties to various objects.

Regardless, that is *by definition* not interoperable.

IE has a currentStyle property,

And runtimeStyle. An exception needs to be made here as long as there is
no implementation of the standards-compliant getComputedStyle(). So this
property does not matter here.

Opera adds to that a `posTop` property, and so on. The list of things
that exist that are non standard is endless.

Many of which are not alternatives to standards-compliant approaches, which
are therefore not interoperable, and should be avoided on the Web.

Generally, non-standard features should be avoided when there are
standard features available.

Hear, hear!

In this case, the feature is widely implemented,
Nonsense.

is part of a working draft (HTML5).

Which has no relevance at all, and it _not_ to be cited as reference,
*because* of its Working Draft status. Told you.

The closest standard alternative is to use an `a` element, but that has
drawbacks. For example, it affects the status bar, and to prevent the
link action, the event must be canceled in some way.

Your logic is flawed. It makes absolutely no sense for a SPAN/span element
to receive the focus.

It is true that the property is available on objects representing
SPAN/span elements in two implementations. But the result is
proprietary, not interoperable behavior, nothing that should be relied
upon on the Web.

Either you're not counting right [...]

I am counting the occurrences in your posting, stupid.

I do not completely agree with your conclusion that it should not be
relied upon on the web.

Then you are a fool who deserves what he gets.


PointedEars

 

[preet]

how do you dynamically check if the other site is linking to you or not
without using google search ?

kindly provide a solution

 

[Dr J R Stockton]

In comp.lang.javascript message <53565cea-5fa4-4f34-9b90-0af6e0f7fd6d@u3
4g2000yqu.googlegroups.com>, Thu, 8 Apr 2010 16:33:32, GIAM

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

Try something like

document.getElementById("II").innerHTML = linktext.link("URL")

If it works, it at least tells you something about your problem, even if
you don't want to end up with that approach.

You wrote "I'm using IE 7.". What your readers use is more important in
the end, You should, unless coding for an intranet, test with other
browsers - one reason is that different error messages may be more
helpful.

 

[Garrett Smith]

In comp.lang.javascript message <53565cea-5fa4-4f34-9b90-0af6e0f7fd6d@u3
4g2000yqu.googlegroups.com>, Thu, 8 Apr 2010 16:33:32, GIAM


Try something like

document.getElementById("II").innerHTML = linktext.link("URL")

If it works, it at least tells you something about your problem, even if
you don't want to end up with that approach.

I suggest not using the proprietary String.prototype methods. They are
widely implemented now, but for how long?

Trying something to see if it works is fine for experimenting, but not
for producing stable code. It just may be that the approached worked due
to a quirk.

The `innerHTML` property is nonstandard, too, but is in widespread use
and is also part of a working draft (HTML5). It is unlikely to go away
any time.

 

[Antony Scriven]

[...] You should, unless coding for an intranet, test
with other browsers - [...]

In my experience, even when coding for an intranet, it's
still beneficial to test with other browsers. --Antony

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Sat, 10 Apr 2010 16:08:06, Garrett Smith

I suggest not using the proprietary String.prototype methods. They are
widely implemented now, but for how long?

Please consider the distinction between "try" and "use". If such a test
works with copied strings, it at least shows that the strings have no
fatal error. If it fails, it is likely to give a different error
message which may cause realisation of an underlying problem. And, if
it works, it may allow continued progress on other parts of the
application while the problem with the posted code is being considered.

Trying something to see if it works is fine for experimenting, but not
for producing stable code. It just may be that the approached worked
due to a quirk.

The OP may have an unspotted typo in his code ; your own writings, like
mine, show how easy that can be.

Antony : agreed; the different error-reporting alone justifies tests
with other browsers.