JavaScript：getElementByID 和 mailTo 问题答案

【问题标题】：JavaScript: getElementByID and mailTo issueJavaScript：getElementByID 和 mailTo 问题
【发布时间】：2015-09-29 16:26:25
【问题描述】：

所以我正在尝试使用 javascript 添加一个 mailto，但我无法做到这一点

document.getElementById("email").innerHTML = <a href="mailto:arr1[0].analy1.email?">;

因为这会产生几个错误。在我的 javascript 代码中，arr1[0].analy1.email 实际上包含一个电子邮件地址，我可以使用

获取该电子邮件地址以显示在我的页面上

document.getElementById("email").innerHTML = arr1[0].analy1.email;

但我需要知道如何让这个 innerHTML 电子邮件成为真正的 mailto: 链接...

【问题讨论】：

标签： javascript innerhtml getelementbyid mailto

【解决方案1】：

字符串连接：

document.getElementById("email").innerHTML = '<a href="mailto:' + arr1[0].analy1.email + '">';

或者使用新的 ECMAScript 6 模板字符串：

document.getElementById('email').innerHTML = `<a href="mailto:${arr1[0].analy1.email}">`

【讨论】：

应该是'<a href="mailto:' + arr1[0].analy1.email + '">';
@Orland -- 啊 - 是的 - 已修复。
不是真的，不是。此外，innerHTML 是不好的做法，会导致 XSS。

【解决方案2】：

除了将字符串连接作为@tymeJV 的答案之外，您还可以使用 DOM API 来创建和插入 DOM 元素

var email = document.getElementById("email"),
    a = document.createElement('a');
if (email.hasChildNodes()) {
    email.removechild(email.firstChild);
}
a.href = 'mailto:' + arr1[0].analy1.email;
a.textContent = arr1[0].analy1.email; // This will add the actual text to the link

email.appendChild(a);

【讨论】：

这行得通，但是当我再次运行我的函数时， arr1[0].analy1.email 的电子邮件值似乎仍然在内存中，所以当我再次运行它时，它将 appendChild(a) 到以前的值因此我连续获得 2 个电子邮件地址链接，如果我再次运行它，则获得 3 个。有没有办法可以重置它，以便只设置 arr1[0].analy1.email 的新值而旧值不显示？我想我可以做一个 if 语句说 if var a !== null 然后在运行此代码时将其设为 null 或清除它。
你可以 removechild() from email 之前，我编辑了。