我正在尝试将包含输入文本的 h2 添加到具有类“the-div”的 div答案

【问题标题】：I'm trying to add an h2 containing the input text to the to the div with class "the-div"我正在尝试将包含输入文本的 h2 添加到具有类“the-div”的 div
【发布时间】：2021-07-24 02:36:25
【问题描述】：

<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 类，在用户单击“生成文本”后，输入字段中的值是the-div。

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

【问题讨论】：

标签： javascript html jquery append

【解决方案1】：

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

最好用这个；不需要 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>

【讨论】：

【解决方案2】：

您没有正确选择div。您缺少用于选择具有类的元素的 .
为什么要将文本附加到 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>

【讨论】：

那段时间不见了很尴尬。那个文本功能非常有用，谢谢！因为这是一个愚蠢的错误，我应该删除这个帖子吗？