文本不会写入页面，但会显示在alert（）消息中。 JavaScript和HTML

Question

我正在开发一种将收集一些信息的表格。 我在代码中进行了一些设置，当“名字”文本框更改（更改）时，子标题（ <td> ）将被填充为“名字”。

由于某种原因，当我发出警报消息时，文本永远不会被写入具有subHeader BUT id的<td>中，它就在那里。 我究竟做错了什么？

JavaScript（无效）：

function FirstName_onchange() {
    var LastName = document.getElementById('LastName').value;
    var FirstName = document.getElementById('FirstName').value;
    document.getElementById('subHeader').value = FirstName + " " + LastName;
}

JavaScript（Works）：

function FirstName_onchange() {
    var LastName = document.getElementById('LastName').value;
    var FirstName = document.getElementById('FirstName').value;
    alert(document.getElementById('subHeader').value = FirstName + " " + LastName);
}

HTML：

<tr>
    <td id="subHeader" colspan="4">
    </td>
</tr>

Answer 1

<td>标签没有值

试想一下这个<td value="sample"></td>

您必须改用.innerHTML或.innerTest或.textContent

function FirstName_onchange() {
var LastName = document.getElementById('LastName').value;
var FirstName = document.getElementById('FirstName').value;
document.getElementById('subHeader').textContent = FirstName + " " + LastName;
}

Answer 2

.value成员仅用于<input /> ，如果您想使用.textContent （或.innerText ）或.innerHTML来快速设置元素的内容，如下所示：

function FirstName_onchange() {

    var lastName  = document.getElementById('LastName').value;
    var firstName = document.getElementById('FirstName').value;
    document.getElementById('subHeader').textContent = firstName + " " + lastName;
}

请注意， .textContent优于.innerText ，如果使用.innerHTML ，则应.innerText用户输入以防止XSS攻击。

Answer 3

值是<input />和<textarea / >的有效属性。

您应该使用.innerHTML或.innerText和.textContent 。 从技术上讲， innerText无效，但IE要求使用它。

function FirstName_onchange() {
    var LastName = document.getElementById('LastName').value;
    var FirstName = document.getElementById('FirstName').value;
    document.getElementById('subHeader').innerText = FirstName + " " + LastName;
    document.getElementById('subHeader').textContent = FirstName + " " + LastName;
}

Answer 4

通过做这个

alert(document.getElementById('subHeader').value = FirstName + " " + LastName);

，您向td对象添加了新的属性“值”，并将其传递给了Alert。 这就是警报起作用的原因。