I am trying to create an anchor link when a user clicks on another link.
When I click on the first link, the onclick event is raised and generates another link using JavaScript, but that is not generated properly.

This is my anchor link in JavaScript:

temp="<li><a href='#' onclick='showMenu3('"+menu2[0]+"','"+menu2[2]+"')'>
      <img src='images/noImageSmall.png'/>"+menu2[2]+"</a></li>";

But it is generated in the source as following:

 <li><a href="#" onclick="showMenu3(" 139','invite="" a="" friend')'="">
    <img src="images/noImageSmall.png">Invite a friend</a></li>

How can I generate the following link using JavaScript?

 <li><a href="#" onclick="showMenu3('139','invite friend')">
        <img src="images/noImageSmall.png">Invite a friend</a></li>

I am trying to create an anchor link when a user clicks on another link.
When I click on the first link, the onclick event is raised and generates another link using JavaScript, but that is not generated properly.

This is my anchor link in JavaScript:

temp="<li><a href='#' onclick='showMenu3('"+menu2[0]+"','"+menu2[2]+"')'>
      <img src='images/noImageSmall.png'/>"+menu2[2]+"</a></li>";

But it is generated in the source as following:

 <li><a href="#" onclick="showMenu3(" 139','invite="" a="" friend')'="">
    <img src="images/noImageSmall.png">Invite a friend</a></li>

How can I generate the following link using JavaScript?

 <li><a href="#" onclick="showMenu3('139','invite friend')">
        <img src="images/noImageSmall.png">Invite a friend</a></li>

• javascript
• html
• jsp

• 1 Can you paste the contents of menu2 array? Also, quickly try removing the line break in the temp variable. Line breaks do weird things in JavaScript - it might help. This works for me: jsfiddle/BMKNZ – Maccath Commented Nov 15, 2012 at 13:08
• hai, I saw that code in browser using viewpage source of mouse right click and here menu2[0] and menu2[2] values are replacing exactly, but the problem is with quotes only. – Narasimha Commented Nov 15, 2012 at 13:09
• hai Maccath, it is displaying correct in alert box, but in the generated output I saw a different code as I mentioned above(in browser using viewpage source of mouse right click). – Narasimha Commented Nov 15, 2012 at 13:20

3 Answers 3

This will work:

var temp = '<li><a href="#" onclick="showMenu3(' + menu2[0] + ', \'' + menu2[2] + '\')"><img src="images/noImageSmall.png"/>' + menu2[2] + '</a></li>';

Not surprisingly, I agree with the others that this is not a good practice. It's error-prone, way too easy to generate invalid markup (which will introduce more bugs down the line) and you have to really understand string concatenation.

My preferred method is this:

var li = document.createElement('li'),
    a = document.createElement('a'),
    node = document.createTextNode(),
    img = document.createElement('img');
node.textContent = menu2[2];
img.src = "images/noImageSmall.png";
a.href = '#';
a.onclick = function(e) {
    var arg1 = menu2[0],
        arg2 = menu2[2];
    showMenu3(arg1, arg2);
    e = e || window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    return false;
};
a.appendChild(img);
a.appendChild(node);
li.appendChild(a);
document.body.appendChild(li);

Here's a fiddle demonstrating both techniques: http://jsfiddle/mLrbP/

Use a DOM inspector to see the markup generated.

I'd remend doing something more like this:

    function createMenuItem(menuItem) {
        var listItem = document.createElement('li');
        var link = document.createElement('a');
        var linkFunction = "showMenu3('"+menuItem[0]+"','"+menuItem[bar]+"')";
        var image = document.createElement('img');
            image.setAttribute('src', 'images/noImageSmall.png');

            listItem.appendChild(link);
            link.appendChild(image);
            link.appendChild(document.createTextNode(menuItem[2]));
            link.setAttribute('href', '#');
            link.setAttribute('onClick', linkFunction);

            return listItem;
    }

You could probably use it with something similar to:

    document.getElementById('theMenu').appendChild(createMenuItem(menu2));

This may be longer but it is also infinitely more readable and maintainable than a concatenating strings together to create html. As a bonus, it is also almost impossible to create invalid html structures this way.

Build DOM elements as string can be weird sometimes, you have to check quote/double quotes excapings.

Try this:

temp='<li><a href="#" onclick="showMenu3(\''+menu2[0]+"','"+menu2[2]+'\')">
      <img src="images/noImageSmall.png"/>'+menu2[2]+'</a></li>';

If still doesn't work, check the string content of the menu2 array, it may contains quotes or double-quotes that may need excaping.

In conclusion, i advice you to use document.createElement to build HTML elements instead of doing this by string.