1

当用户单击另一个链接时，我正在尝试创建一个锚链接。
当我单击第一个链接时，会引发 onclick 事件并使用 JavaScript 生成另一个链接，但这不是正确生成的。

这是我在 JavaScript 中的锚链接：

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

但它在源代码中生成如下：

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

如何使用 JavaScript 生成以下链接？

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

3 回答 3

2

我建议做更多这样的事情：

    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;
    }

您可能可以将它与类似的东西一起使用：

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

这可能会更长，但它也比将字符串连接在一起创建 html 更具可读性和可维护性。作为奖励，以这种方式创建无效的 html 结构也几乎是不可能的。

于 2012-11-15T13:21:14.870 回答
2

这将起作用：

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

毫不奇怪，我同意其他人的观点，即这不是一个好习惯。它很容易出错，太容易生成无效标记（这将引入更多错误），您必须真正了解字符串连接。

我的首选方法是这样的：

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

这是一个演示这两种技术的小提琴：http: //jsfiddle.net/mLrbP/

使用 DOM 检查器查看生成的标记。

于 2012-11-15T13:32:04.130 回答
0

将 DOM 元素构建为字符串有时会很奇怪，您必须检查引号/双引号的扩展。

试试这个：

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

如果仍然不起作用，请检查 menu2 数组的字符串内容，它可能包含可能需要扩展的引号或双引号。

总之，我建议您使用 document.createElement 来构建 HTML 元素，而不是通过字符串来构建。

于 2012-11-15T13:10:34.417 回答