我正在尝试将包含输入文本的 h2 添加到 div 和 class "the-div"

Question

<html>
<body>
    <form class="form-disable">
        <br>
        <input type="text" id="message2">
        <br>
         <button id="myButton" type="submit" disabled>Generate Text</button> 
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="jQueryDrills.js"></script>
</body>
</html>

<script>
       
$("#message2").blur(function(){
    if ($(this).val() =='') {
        $("#myButton").prop( "disabled", true );
    } else {
        $("#myButton").prop( "disabled", false );
    }
})

// function text(){
//     let $box = $('#message2').val();
//     alert($box);
// }

$(".form-disable").after("<div class='the-div' style='background-color: red;'>Im Dumb</div>");

$("#myButton").click(function(event){
let theH2 = document.createElement('h2');
let $alert = $('#message2').val();
$(theH2).append('$alert');
$("the-div").append(theH2);
event.preventDefault();
})

$("#message2").click(function(){
    $("#myButton").removeAttr("disabled");
    // event.preventDefault();
})

$(".buttn").click(function(event){

    $('body').append('<div>Hello</div>');
    event.preventDefault();
})

$(".buttn2").click(function(){
    $('body').removeAll();
})
</script>

我正在尝试将 h2 元素添加到 div 和 class the-div，用户单击 'Generate Text'.

我已经用控制台日志测试了应该将 h2 输入 div 的函数，它可以正常工作。所以我很确定我的问题与附加有关，但我不明白为什么。另外请忽略注释掉的函数，它是另一个确实有效的测试，让我进一步相信这是一个附加错误。

Answer 1

您没有正确选择 div。您错过了 . 来选择带有 class
的元素
为什么要将文本附加到 h2 元素？请改用 .text(yourtext)。

$("#message2").blur(function() {
  if ($(this).val() == '') {
    $("#myButton").prop("disabled", true);
  } else {
    $("#myButton").prop("disabled", false);
  }
})
$(".form-disable").after("<div class='the-div' style='background-color: red;'>Im Dumb</div>");

$("#myButton").click(function(event) {
  let theH2 = document.createElement('h2');
  let $alert = $('#message2').val();
  $(theH2).text($alert);
  $(".the-div").append(theH2);
  event.preventDefault();
})

$("#message2").click(function() {
  $("#myButton").removeAttr("disabled");
  // event.preventDefault();
})

$(".buttn").click(function(event) {

  $('body').append('<div>Hello</div>');
  event.preventDefault();
})

$(".buttn2").click(function() {
  $('body').removeAll();
})

<html>

<body>
  <form class="form-disable">
    <br>
    <input type="text" id="message2">
    <br>
    <button id="myButton" type="submit" disabled>Generate Text</button>
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="jQueryDrills.js"></script>
</body>

</html>

Answer 2

对于一些简单的事情来说，这是相当多的代码。

最好用这个；不需要 jQuery 或其他任何东西。

document.getElementById("myButton").addEventListener("click", function() {
  let oldText = document.getElementById("the-div").innerHTML;
  let inputText = document.getElementById("message2").value;
  document.getElementById("the-div").innerHTML = oldText + '<h2>' + inputText + '</h2>';
});

<html>
<body>
    <input type="text" id="message2">
    <button id="myButton">Generate Text</button>
</body>
</html>
<div id='the-div' style='background-color: red;'>Im Dumb</div>

我正在尝试将包含输入文本的 h2 添加到 div 和 class "the-div"

I'm trying to add an h2 containing the input text to the to the div with class "the-div"

html

javascript

jquery

append