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 に答える