文本赢得'；无法写入页面，但将显示在alert（）消息中。JavaScript和HTML

我正在开发一个表格来收集一些信息。我在代码中设置了一些东西，当名字文本框更改（onchange）时，子标题（

）将用名字填充

由于某种原因，文本从未被写入

中，它的

id

为

副标题

，但当我发出警报消息时，它就在那里。我做错了什么

JavaScript（不工作）：

JavaScript（作品）：

HTML:

---

如果要快速设置元素的内容，则

.value

成员仅适用于

，请使用

.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

，则应清理用户输入以防止XSS攻击，例如。

.value

成员仅适用于

，如果您想快速设置元素的内容，请使用

.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

，则应清理用户输入以防止XSS攻击，例如。

标记没有值

想象一下这个

您必须改用

.innerHTML

或

.innerTest

或

.textContent

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

标记没有值

想象一下这个

您必须改用

.innerHTML

或

.innerTest

或

.textContent

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

---

值仅是

和

的有效属性

您应该使用
.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;
}

值仅是
和
的有效属性

您应该使用
.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;
}

通过这样做

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

，您向td对象添加了一个新属性“value”，并将其传递给alert。这就是alert工作的原因。

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

，您向td对象添加了一个新属性“value”，并将其传递给alert。这就是alert工作的原因。
您应该使用而不是执行此操作的
value
。为什么
.value
不适用于此场景？您应该使用而不是执行此操作的
value
。为什么
.value
不适用于此场景？啊！这是一个问题有道理。谢谢！@mwilson:你不应该使用
innerHTML
。请参阅FakeRainBrigand的答案进行讨论。啊！这是有道理的。谢谢！@mwilson:你不应该使用
innerHTML
。请参阅FakeRainBrigand的答案进行讨论。如果你使用
innerHTML
，请确保将内容中的
，以及
&/code>替换为ode>
、
和
&；
@MichaelLiu，这基本上就是
innerText
/
textContent
所做的，但是是的，这是innerHTML的一个安全问题。是的，我只是想指出OP不应该只写
文档。getElementById（'subHeader'）。innerHTML=FirstName+“”+LastName；
，就像公认的答案一样。如果您使用
innerHTML
，请确保将内容中的
和
&
替换为
、
和
&；
@MichaelLiu，这基本上就是
innerText
/
文本内容所做的，但是是的，这将是一个安全问题nerHTML。是的，我只是想指出OP不应该像公认的答案那样只写
document.getElementById（'subHeader'）。innerHTML=FirstName+“”+LastName；
。@mwilson所有主要浏览器都支持textContent属性。@mwilson所有主要浏览器都支持textContent属性。