如何使用JavaScript在表格单元格中写入电子邮件地址？

Question

I am currently trying to get my code to display the email "cadler@mpl.gov" with javascript however my code is not displaying the text. Any idea what could be causing it?

 var userName = "cadler"; var emServer = "mpl.gov"; var emLink = username + "@" + emServer; document.write("<a href='mailto:" + emLink + "'>"); document.write(emLink); document.write("</a>"); 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td></td> </table> 

The Javascript should insert the email address in the empty table cell.

Answer 1

Firstly, as others have mentioned, it should be userName , not username .

Secondly, don't use document.write. Use Element.innerHTML or create a textnode to append to the element, combined with editing the href attribute.

The code becomes:

 var userName = "cadler", emServer = "mpl.gov", emLink = userName + "@" + emServer; document.getElementsByClassName("email")[0].innerHTML = "<a href='mailto:" + emLink + "'>"+emLink+"</a>"; 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td class="email"></td> </tr> </table> 

 var userName = "cadler", emServer = "mpl.gov", emLink = userName + "@" + emServer, emTextNode = document.createTextNode(emLink), elem = document.getElementsByClassName("email")[0]; elem.setAttribute("href", "mailto:" + emLink); elem.appendChild(emTextNode); 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td class="email"></td> </tr> </table> 

As others mentioned, do not use document.write. That said, if you have to use document.write, then put the code inside the td :

<td class="email">
    <script>
        var userName = "cadler",
            emServer = "mpl.gov",
            emLink = userName + "@" + emServer;

        document.write("<a href='mailto:" + emLink + "'>");
        document.write(emLink);
        document.write("</a>");
    </script>
</td>

Answer 2

You had a typo: username instead of userName at the third line. Also you were not adding the email to the table's column. You can do this by using a span element inside the td :

  var userName = "cadler"; var emServer = "mpl.gov"; var emLink = userName + "@" + emServer; var email = document.getElementById("email"); email.innerHTML = "<a href='mailto:" + emLink + "'>" + emLink + "</a>"; 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td><span id="email"></span></td> </tr> </table> 

Answer 3

The first problem I see, is that you first define your variable userName and later refer to it as username . You forgot to capitalize the letter n !

Fix that, and the email address will be displayed AFTER the table :

 var userName = "cadler"; var emServer = "mpl.gov"; var emLink = userName + "@" + emServer; document.write("<a href='mailto:" + emLink + "'>"); document.write(emLink); document.write("</a>"); 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td></td> </table> 

To display it in the empty cell, you need to make a few more adjustments :

 var userName = "cadler"; var emServer = "mpl.gov"; var emLink = userName + "@" + emServer; var email = "<a href='mailto:" + emLink + "'>" + emLink + "</a>"; document.querySelector('td:last-child').innerHTML = email; 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td></td> </table> 

document.querySelector('td:last-child') selects the last td element. Changing its innerHTML allows you to put a value in that element.

Anyway, you should never ever ever use document.write . It's been considered a bad practice for many years now. Instead, always use something like document.getElementById or document.querySelector and change the innerHTML of that element.

Answer 4

there is a type in your variable name userName. You can set this value to empty cell. You have defined no id or class, selecting it will not be very clean, you can do something like this:

  var userName = "cadler"; var emServer = "mpl.gov"; var emLink = userName + "@" + emServer; document.write("<a href='mailto:" + emLink + "'>"); document.write(emLink); document.write("</a>"); var table = document.getElementsByTagName('table')[0] var row = table.getElementsByTagName('tr')[1] row.getElementsByTagName('td')[2].innerHTML = "<a href='mailto:" + emLink + "'>" + emLink + "</a>"; 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td> </td> 

Answer 5

All of the other answers use innerHTML to insert the <a> element into the DOM. However, there are several reasons not to use it.

The following snippet provides a solution without innerHTML :

 var userName = "cadler"; var emServer = "mpl.gov"; var emLink = userName + "@" + emServer; // create a new <a> element and set the content and href attribute var linkElement = document.createElement("a"); linkElement.href = "mailto:" + emLink; linkElement.textContent = emLink; // find the element with the ID "email-cell" var td = document.getElementById("email-cell"); td.appendChild(linkElement); 

 <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Name</th> <th>Phone</th> <th>E-Mail</th> </tr> <tr> <td>Catherine Adler<br />Library Director</td> <td>555-3100</td> <td id="email-cell"></td> <!-- this cell will contain the link --> </tr> </table> 

Read about document.createElement and Node.prototype.appendChild on MDN.