JavaScript 用户输入：在句子中间添加单词-html教程-PHP中文网

JavaScript 用户输入：在句子中间添加单词

碧海醫心

发布： 2025-09-07 13:43:16

原创

905人浏览过

javascript 用户输入：在句子中间添加单词

本文将介绍如何使用 JavaScript 和 HTML 创建一个简单的交互式页面，允许用户在句子中间插入自定义单词。通过获取用户输入并动态更新 HTML 内容，实现句子的实时修改。本文提供完整的 HTML 结构和 JavaScript 代码，并附带示例和注意事项，帮助你快速掌握该功能的实现方法。

实现步骤

HTML 结构:

首先，我们需要创建 HTML 结构，包括一个用于显示句子的段落，一个用于接收用户输入的文本框，以及一个触发 JavaScript 函数的按钮。

<p>Aku sedang <span id="sentence">_____</span> di sekolah.</p>
<input type="text" id="userInput">
<button onclick="modifySentence()">修改</button>

登录后复制

在这个例子中，<span> 元素 sentence 用于占位，其内容将由 JavaScript 动态更新。 userInput 是文本输入框，用于接收用户输入的单词。点击按钮会触发 modifySentence() 函数。

立即学习“Java免费学习笔记（深入）”；

JavaScript 代码:

接下来，我们需要编写 JavaScript 代码来获取用户输入，并更新 <span> 元素的内容。

function modifySentence() {
  let word = document.getElementById("userInput").value;
  document.getElementById("sentence").innerHTML = word;
}

登录后复制

这段代码首先获取 ID 为 userInput 的文本框的值，并将其存储在 word 变量中。然后，它使用 document.getElementById("sentence") 获取 ID 为 sentence 的 <span> 元素，并使用 innerHTML 属性将其内容更新为 word 变量的值。

完整代码示例

美间AI

美间AI：让设计更简单

查看详情

将以上 HTML 和 JavaScript 代码组合在一起，即可得到完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>在句子中间添加单词</title>
</head>
<body>

  <p>Aku sedang <span id="sentence">_____</span> di sekolah.</p>
  <input type="text" id="userInput">
  <button onclick="modifySentence()">修改</button>

  <script>
    function modifySentence() {
      let word = document.getElementById("userInput").value;
      document.getElementById("sentence").innerHTML = word;
    }
  </script>

</body>
</html>

登录后复制

注意事项

安全性: 请注意，直接使用 innerHTML 可能会导致跨站脚本攻击 (XSS)。如果用户输入包含 HTML 代码，它将被解释为 HTML，这可能会导致安全问题。在生产环境中，应始终对用户输入进行验证和转义，以防止 XSS 攻击。可以考虑使用 textContent 替代 innerHTML，它会将用户输入视为纯文本。
错误处理: 建议添加错误处理机制，例如检查用户是否输入了内容，或者在出现意外错误时提供友好的提示信息。
代码可读性: 编写清晰、可读性强的代码非常重要。使用有意义的变量名，添加注释，并遵循一致的代码风格。

总结

通过本文的教程，你已经学会了如何使用 JavaScript 和 HTML 创建一个简单的交互式页面，允许用户在句子中间添加自定义单词。掌握了用户输入获取和 DOM 元素动态更新的基本方法。在实际应用中，可以根据具体需求进行扩展和改进，例如添加更多功能，或者优化用户界面。

以上就是JavaScript 用户输入：在句子中间添加单词的详细内容，更多请关注php中文网其它相关文章！