如何将动态创建的 p 元素插入到主 div 中，每次单击按钮时，该 div 都会从文本框 val 获取其内部文本

Question

$button.on("click", function(e) {
    $para.html($evnt.val());
    if ($evnt.val() === "") {
        $evnt.css("border", "1px solid red");
        alert("Please enter some text in the textbox to add as task!!");
    } else {
        $main.prepend($para);
        $evnt.css("border", "none");
    }
    $evnt.val('');
});

$main>>> 主分部，

$evnt>>> 输入字段

我是jquery的新手，尝试过这个，但是每次我单击按钮时，预先输入的文本项都会被新的文本项替换。

Answer 1

您需要

在on.click处理程序中创建p元素。

var $evnt = $('input');
var $main = $('#main');
var $button = $('button');
$button.on("click", function(e) {
    var $para = $("<p></p>", { addClass: "para" }); // New p element
    $para.html($evnt.val());
    if ($evnt.val() === "") {
        $evnt.css("border", "1px solid red");
        alert("Please enter some text in the textbox to add as task!!");
    } else {
        $main.prepend($para);
        $evnt.css("border", "none");
    }
    $evnt.val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value='' placeholder='Enter something!'>
<button>Add</button>
<div id='main'></div>