动态插入的HTML在我的表元素中呈现为文本

function addUser() { var userLogo = '< i class = "Small material - icons" > supervisor_account < /i>'; var user = document.getElementById('name').value; var email = document.getElementById('email').value;; if (!user || !email) { alert("Error"); } else { var table = document.getElementsByTagName('table')[0]; var newRow = table.insertRow(1); var cel0 = newRow.insertCell(0); var cel1 = newRow.insertCell(1); var cel2 = newRow.insertCell(2); cel0.innerHTML = userLogo; cel1.innerHTML = user; cel2.innerHTML = email; } }

2 个解决方案

#1

You cannot have spaces between your angle brackets and the tag name in HTML.

您的尖括号和HTML中的标记名称之间不能有空格。

This is why your string < i class = "Small material - icons" > supervisor_account < /i> is being parsed incorrectly. It should be written instead as:

这就是您的字符串 supervisor_account 被错误地解析的原因。它应该写成:

<i class = "Small material - icons" > supervisor_account </i>

---

Demo Snippet:

function addUser() {

  var userLogo = '<i class = "Small material - icons" > supervisor_account </i>';

  var user = document.getElementById('name').value;
  var email = document.getElementById('email').value;

  if (!user || !email) {
    alert("Error");
  } else {

    var table = document.getElementsByTagName('table')[0];
    var newRow = table.insertRow(1);

    var cel0 = newRow.insertCell(0);
    var cel1 = newRow.insertCell(1);
    var cel2 = newRow.insertCell(2);

    cel0.innerHTML = userLogo;
    cel1.innerHTML = user;
    cel2.innerHTML = email;
  }

}

addUser()

table td, table th { padding: 0.5em; }

<input id="name" value="John Doe">
<input id="email" value="[e-mail]">
<table>
  <th>Icon</th>
  <th>Name</th>
  <th>Email</th>
</table>

#2

You have unnecessary spaces on the inserted html

插入的html上有不必要的空格

       function addUser() {

            var userLogo = '<i class="Small material - icons"> supervisor_account </i>';

            var user = document.getElementById('name').value;
            var email = document.getElementById('email').value;;

            if (!user || !email) {
                alert("Error");
            } else {

                var table = document.getElementsByTagName('table')[0];
                var newRow = table.insertRow(1);

                var cel0 = newRow.insertCell(0);
                var cel1 = newRow.insertCell(1);
                var cel2 = newRow.insertCell(2);

                cel0.innerHTML = userLogo;
                cel1.innerHTML = user;
                cel2.innerHTML = email;
            }

        }

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Name <input type='text' id='name'/>
email <input type='text' id='email'>
<button type='button' onclick="addUser()">addUser</button>
<table>
<tr>
<td>cel0</td>
<td>cel1</td>
<td>cel2</td>
</tr>
</table>