![](/img/trans.png)
[英]How to get a anchor link text inside a javascript and calling with arguments
[英]How to create a anchor link in javascript with dynamic arguments?
我試圖在用戶點擊另一個鏈接時創建一個錨鏈接。
當我單擊第一個鏈接時,會引發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>
我建議做更像這樣的事情:
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結構幾乎是不可能的。
這將有效:
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檢查器查看生成的標記。
將DOM元素構建為字符串有時可能很奇怪,您必須檢查引號/雙引號重新排序。
嘗試這個:
temp='<li><a href="#" onclick="showMenu3(\''+menu2[0]+"','"+menu2[2]+'\')">
<img src="images/noImageSmall.png"/>'+menu2[2]+'</a></li>';
如果仍然不起作用,請檢查menu2數組的字符串內容,它可能包含可能需要重新編號的引號或雙引號。
總之,我建議你使用document.createElement來構建HTML元素,而不是通過字符串來實現。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.