How do you insert html to a field or a div in a form using a client script?

[mahudg2]

I'm trying to add a button right next to the short description field on the incident or task table. However I'm having trouble making it show up. The code below is what I'm using. Any ideas?

function onLoad() {

    var field = g_form.getControl('short_description');

    $(field.id).up(1).insert('<td><a onclick="kbPopupSC()">Create Knowledge</a></td');

    $('status.' + field.id).up('td');

}

Thanks in advance!

EDIT:

I also tried

function onLoad() {

var field = g_form.getControl('short_description');

  field.innerHTML += '<td><a onclick="kbPopupSC()"><img class="knowledge" title="Create Knowledge" src="images/list_edit.pngx" height="16" border="0" width="16"></a></td>';

}

And it managed to add the HTML but it was within the shortdescription input rather than beside it.

[geoffcox]

You would be better off creating a UI Macro. Then create a Formatter that can be used to put your UI macro on a form. Then add your formatter to the form just like you would another field. Your new formatter will appear on the left side of the Personalize Form slushbucket.

Just be aware that UI macros are in XML, so be careful about rules for certain characters (such as ampersands and less-than signs).

There are plenty of examples, but let me know if you need more details.

[mahudg2]

I agree that a UI Macro would be better, but unfortunately all I have access to change is the client script (long story).

Is there no way to use something like g_form.getFormElement to get the html and insert something at the end of it?

[mahudg2 · Accepted solution]

Here's how I ended up doing it:

var	desc = document.getElementsByClassName("flex-row");
	desc[0].innerHTML += '<td><a onclick="kbPopupSC()"><img class="knowledge" title="Create Knowledge" src="images/list_edit.pngx" height="16" border="0" width="16"></a></td>';