DOM - adding a <a> tag

[slash_gnr3k]

hi,
i have the following javascript

	<script language="JavaScript">

		var iteration = 0;

		function AddToIngList (form, iteration)
		{

			var it = iteration;

			var Ingredient = form.ingredienttoadd.value;
			form.ingredients_added.value += Ingredient + "\n";

			var objHTML, objText, objinput, objLink;

			objHTML = document.createElement('P');
			objHTML.setAttribute('NAME', 'txtTest');
			objHTML.setAttribute('ID', 'txtTest');
   
			var strTest = form.ingredienttoadd.value;
  			objText = document.createTextNode(strTest);

			var strText = 'http://www.sitepoint.com';
			objLink = document.createElement('A');
			objLink.setAttribute('HREF', 'strText'); 

			objinput = document.createElement
('INPUT');		
			objinput.setAttribute('TYPE', 'text');
			objinput.setAttribute('NAME', 'input'+it);

			form.appendChild(objHTML);		
			objHTML.appendChild(objText);
			objHTML.appendChild(objinput);
			objHTML.appendChild(objLink);
		
		}

	</script>

which is run when a button is clicked. basically it adds text which is retrieved from a drop down box and then creates an input box. this bit works fine. it is the next bit i'm having trouble with. i want also for an <a> tag to be created which, if clicked, removes the text element, input element and the <a> element created.

to make a start i tried to create an <a> element that just leads to an external website which is what i have tried to do in the script above. nothing comes up. i think this may be because what i have above will create <a href = "http://www.sitepoint.com"></a> and there needs to be some text before the </a>tag. i may be wrong, i dont know much about javascript but i think that would make sense.

hope this makes sense and i hope someone can help me out
thanks

[AutisticCuckoo]

You create an empty anchor element which will be 0px wide, so there's nothing to click. Add some content to the link to make it visible:

var strText = 'http://www.sitepoint.com';
objLink = document.createElement('A');
objLink.setAttribute('HREF', 'strText');
objLink.appendChild(document.createTextNode(strText));

[slash_gnr3k]

thanks for your help! i moved on to the next bit of removing the elements. i have the following code:

	<script language="JavaScript">

		var iteration = 0;

		function AddToIngList (form, iteration)
		{

			var it = iteration;

			var Ingredient = form.ingredienttoadd.value;
			form.ingredients_added.value += Ingredient + "\n";

			var objHTML, objText, objinput, objLink;

			objHTML = document.createElement('P');
			objHTML.setAttribute('NAME', 'txtTest');
			objHTML.setAttribute('ID', 'txtTest');
   
			var strTest = form.ingredienttoadd.value;
  			objText = document.createTextNode(strTest);


			var strOnClick = 'Test();';
			objLink = document.createElement('A');
			objLink.setAttribute('HREF', 'http://www.sitepoint.com');
			objLink.setAttribute('onclick', strOnClick);
			objLink.appendChild(document.createTextNode('Delete This'));

			objinput = document.createElement
('INPUT');		
			objinput.setAttribute('TYPE', 'text');
			objinput.setAttribute('NAME', 'input'+it);

			form.appendChild(objHTML);		
			objHTML.appendChild(objText);
			objHTML.appendChild(objinput);
			objHTML.appendChild(objLink);
		
		}

		function Test
()
		{

			document.write('Wahey');
		}

so ive now got the behaviour i want for the click of the link - it calls another function (at the moment a pointless one but ill write what i want it to do later!) only problem is, it also goes to sitepoint.com. is there a way i can make the link reload the page. i know you can do it in php. bear in that if i have 3 elements and i delete one using this method. when the page reloads i still want the other 2 elements to be there!
thanks!

[AutisticCuckoo]

You can't use setAttribute() to assign event listeners. Try something like this:

if (objLink.addEventListener) {
    /* for DOM2-compliant browsers */
    objLink.addEventListener("click", Test, false);
} else if (objLink.attachEvent) {
    /* for IE */
    objLink.attachEvent("onclick", Test);
} else {
    objLink.onclick = Test;
}

This is really more complicated than necessary. In this case you could just do objLink.onclick=Test; and be done with it.

This is how you can prevent the link from being followed when it's clicked:

function Test(e)
{
    document.write('Wahey');
    if (e) {
        /* for DOM2-compliant browsers */
        e.preventDefault();
    } else if (window.event) {
        /* for IE */
        window.event.returnValue = false;
    } else {
        return false;
    }
}