本文将介绍如何使用 JavaScript 和 HTML 创建一个简单的交互式页面，允许用户在句子中间插入自定义单词。通过获取用户输入并动态更新 HTML 内容，实现句子的实时修改。本文提供完整的 HTML 结构和 JavaScript 代码，并附带示例和注意事项，帮助你快速掌握该功能的实现方法。
实现步骤
- HTML 结构:
首先，我们需要创建 HTML 结构，包括一个用于显示句子的段落，一个用于接收用户输入的文本框，以及一个触发 JavaScript 函数的按钮。
Aku sedang _____ di sekolah.
立即学习“Java免费学习笔记（深入）”；
在这个例子中， 元素 sentence 用于占位，其内容将由 JavaScript 动态更新。 userInput 是文本输入框，用于接收用户输入的单词。 点击按钮会触发 modifySentence() 函数。
- JavaScript 代码:
接下来，我们需要编写 JavaScript 代码来获取用户输入，并更新 元素的内容。
function modifySentence() {
let word = document.getElementById("userInput").value;
document.getElementById("sentence").innerHTML = word;
}这段代码首先获取 ID 为 userInput 的文本框的值，并将其存储在 word 变量中。 然后，它使用 document.getElementById("sentence") 获取 ID 为 sentence 的 元素，并使用 innerHTML 属性将其内容更新为 word 变量的值。
完整代码示例
将以上 HTML 和 JavaScript 代码组合在一起，即可得到完整的示例代码：
在句子中间添加单词 Aku sedang _____ di sekolah.
立即学习“Java免费学习笔记（深入）”；
注意事项
安全性: 请注意，直接使用 innerHTML 可能会导致跨站脚本攻击 (XSS)。 如果用户输入包含 HTML 代码，它将被解释为 HTML，这可能会导致安全问题。 在生产环境中，应始终对用户输入进行验证和转义，以防止 XSS 攻击。 可以考虑使用 textContent 替代 innerHTML，它会将用户输入视为纯文本。
错误处理: 建议添加错误处理机制，例如检查用户是否输入了内容，或者在出现意外错误时提供友好的提示信息。
代码可读性: 编写清晰、可读性强的代码非常重要。 使用有意义的变量名，添加注释，并遵循一致的代码风格。
总结
通过本文的教程，你已经学会了如何使用 JavaScript 和 HTML 创建一个简单的交互式页面，允许用户在句子中间添加自定义单词。 掌握了用户输入获取和 DOM 元素动态更新的基本方法。 在实际应用中，可以根据具体需求进行扩展和改进，例如添加更多功能，或者优化用户界面。
