[英]How to create a anchor link in javascript with dynamic arguments?
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. 当我单击第一个链接时,会引发onclick事件并使用JavaScript生成另一个链接,但这不会正确生成。
This is my anchor link in JavaScript: 这是我在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? 如何使用JavaScript生成以下链接?
<li><a href="#" onclick="showMenu3('139','invite friend')">
<img src="images/noImageSmall.png">Invite a friend</a></li>
I'd recommend 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. 这可能会更长,但它也比连接字符串一起创建html更具可读性和可维护性。 As a bonus, it is also almost impossible to create invalid html structures this way.
作为奖励,以这种方式创建无效的html结构几乎是不可能的。
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.net/mLrbP/ 这是一个演示两种技术的小提琴: http : //jsfiddle.net/mLrbP/
Use a DOM inspector to see the markup generated. 使用DOM检查器查看生成的标记。
Build DOM elements as string can be weird sometimes, you have to check quote/double quotes excapings. 将DOM元素构建为字符串有时可能很奇怪,您必须检查引号/双引号重新排序。
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. 如果仍然不起作用,请检查menu2数组的字符串内容,它可能包含可能需要重新编号的引号或双引号。
In conclusion, i advice you to use document.createElement to build HTML elements instead of doing this by string. 总之,我建议你使用document.createElement来构建HTML元素,而不是通过字符串来实现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.