How do I add custom anchor links with onclick?

Question

I want to add new anchor links to a page using Greasemonkey. Specifically, I want to add custom smileys so that I don't have to find the smiley image and copy-and-paste the link into an [img] tag every time.

The code I want to add is this

<a href="#" onclick="insert_text(':D', true); return false;">
    <img src="./images/smilies/icon_e_biggrin.gif" alt=":D" title="Very Happy" height="17" width="15">
</a>

but I want to change the img src location and the onclick to something like

insert_text('[img]imagesourcelocation[/img]' ,true) return false;

The [img] source would be the same as the image URL.
I want to be able to add many smileys over time -- changing the alt and title attributes would be great too, but I need mainly the other two.

How would I do this?
So far all I have is this:

var para=document.createElement("a");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("smiley-box");
element.appendChild(para);

As you can see, I need to add this new smiley to the <div> with the id smiley-box.

If anyone can help me do this I would be so happy.

you have a space `document.createElement("a ");` also anchors need an `href`, e.g: `para.href = '#'` — Rafael Herscovici, Nov 05 '13 at 07:18
that dosent help as i dont know how to change all this with js if you could give me a exaple of how to add a anchor like the first code i show so i can edit it to my liking that be great — Rodney Aaron Cheney, Nov 05 '13 at 07:19

score 1 · Answer 1 · answered Nov 05 '13 at 07:28

You can set the properties of DOM element objects by accessing their attributes, e.g. to set the href:

para.href = "#";

Setting the onclick is a bit different - instead of giving it a string of Javascript, you give it a function:

para.onclick = function() {
    insert_text('[img]imagesourcelocation[/img]' ,true);
    return false;
}

To achieve the image in a link, just create an img element instead of a text node, set it's attributes like above, and add it to the link:

// create the img and set it's src
var node=document.createElement("img");
node.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Smiley.png/50px-Smiley.png"

// add the img to the anchor
para.appendChild(node);

Working example here: http://jsfiddle.net/d2gGR/

References:

http://www.w3schools.com/jsref/dom_obj_anchor.asp
http://www.w3schools.com/jsref/dom_obj_image.asp
http://www.w3schools.com/jsref/dom_obj_event.asp

thanks that helps me understand the basics i just figured i could do something ill post my answer to what i have done.Thankyou very much — Rodney Aaron Cheney, Nov 05 '13 at 07:31

score 0 · Answer 2 · answered Nov 05 '13 at 07:49

Not sure if this is the greasemoney way but you could also just update the innerHTML of the smiley box directly

function add(url, alt, title)
{
    var box=document.getElementById("smiley-box");
    box.innerHTML += "<a href=\"#\" onclick=\"insert_text('[img]" + url + 
                     "[/img]', true); return false;\"><img src=\"" + url + 
                     "\" alt=\"" + alt + "\" title=\"" + title + "\" height=\"17\" width=\"15\"></a>";
}

You can then add smileys to the box like this (link, alt text and title text):

add("http://bit.ly/1a4xaTX",":D","Big grin");
add("http://bit.ly/HDGdlw",":(","Sad");
add("http://bit.ly/175LywW",":O","Surprised");

jingtao's solution is a nice one though.

No! [Don't manipulate `innerHTML` on existing page elements](http://stackoverflow.com/a/9462990/331508) except in certain rare situations. — Brock Adams, Nov 05 '13 at 08:08

score 0 · Answer 3 · edited May 23 '17 at 12:21

Here's a complete script that adds custom smilies using the awesome power of jQuery. Note that it avoids 3 of the deadly sins of scripting:

It avoids "cut and paste (and cry)" coding.
It uses event handlers the robust web 2.0 way. (Never use onclick.)
It does not trash innerHTML of existing elements.

Additionally, this code is very easy to make AJAX-aware, if needed, using waitForKeyElements().

// ==UserScript==
// @name     _Add custom smilies
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
$("#smiley-box").append ('<p>Custom smileys.</p>');

addNewSmiley ("http://sguwars.com/forum/images/smilies/icon_cool.gif");

function addNewSmiley (imageURL) {
    $("#smiley-box").append (
        '<a href="#" class="gmCustomSmilies">'
        + '<img src="' + imageURL + '"></a>'
    );
}

//-- Activate click handlers for any and all of our custom smilies
$(document.body).on ("click", "a.gmCustomSmilies", insertSmilie);

function insertSmilie (evnt) {
    var jThis   = $(evnt.target);
    var imgURL  = jThis.find ("img").attr ("src");

    unsafeWindow.insert_text ('[img]' + imgURL + '[/img]', true);
    return false;
}

score -1 · Answer 4 · answered Nov 05 '13 at 07:38

var para=document.createElement("p");
var node=document.createTextNode("custom smileys.");
para.appendChild(node);
links = document.createElement('a');
links.setAttribute('href','#');
links.setAttribute('onclick','insert_text(\'[img]http://sguwars.com/forum/images/smilies/icon_cool.gif[/img]\', true); return false;');
links.innerHTML ='<a href="we.html"><img src="http://sguwars.com/forum/images/smilies/icon_cool.gif" /></a>';
var element=document.getElementById("smiley-box");

element.appendChild(para);
element.appendChild(links);

this is my solution so far thankyou

How do I add custom anchor links with onclick?

4 Answers4