如何获取input字段值并插入至段落的<strong>标签中？

你的代码存在三个关键问题，修正后即可实现需求：

1. $(document).ready() 语法错误
   正确写法需要传入回调函数，原代码缺少包裹的function。

2. 错误使用val()方法
   val()仅用于操作表单元素（如input、textarea）的value属性，要修改普通段落内的文本，应该用text()方法。

3. 未定位到目标<strong>标签
   直接修改.inputvalue会覆盖整个段落内容，需要精准选中.inputvalue下的<strong>元素来更新内容。

修正后的jQuery代码 #

$(document).ready(function() {
  $("#submit").on("click", function() {
    let inputval = $("#name").val();
    $(".inputvalue strong").text(inputval);
  });
});

完整HTML代码（结构无需修改，确保JS正确引入即可） #

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
</head>
<body>
  <header>
    <h1>Jquery</h1>
  </header>
  <main>
    <section>
      <label for="name">Name</label>
      <input type="text" id="name">
      <input type="submit" id="submit">
      <p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
    </section>
  </main>
  <link rel="stylesheet" href="/lib/css/styleswebd06.css">
  <script src="/lib/jquery.min.js"></script>
  <script src="/lib/js/appwebd06.js"></script>
</body>
</html>

如果后续把输入框和提交按钮放在<form>标签里，需要在点击事件中添加e.preventDefault()阻止表单默认提交行为，避免页面刷新：

$("#submit").on("click", function(e) {
  e.preventDefault(); // 阻止表单提交刷新页面
  let inputval = $("#name").val();
  $(".inputvalue strong").text(inputval);
});

内容的提问来源于stack exchange，提问作者silence1979g