如何从两个 input="text" 和 textarea 中获取数据，然后在 <li> 中显示它们答案

【问题标题】：How can I take data's from two's input="text" and textarea then show them inside <li>如何从两个 input="text" 和 textarea 中获取数据，然后在 <li> 中显示它们
【发布时间】：2021-01-24 09:01:19
【问题描述】：

对不起，所有我在 JQuery 方面的教育总共大约 1.5 周。我是新手。主要学习 HTLM/CSS。但是我遇到了 JSQuery 的问题。对我来说，需要以某种方式将数据从右侧添加到左侧（代码中的更多详细信息）

ps：阅读信息已经 4 天了，但绝对是我的脑死，无法理解语法。请至少我应该使用哪种语法我知道应该有“.val()”

console.log('#button');
console.log('#title-box');
console.log('#describe-box');
var title = $('#title-box');
var describe = $('#describe-box');

$(function(){
    $('#button').click(function(){
        $('ul').append("<li><h3> + $('#title-box') + <span>&#10060;</span></h3></li>");
        console.log($('title').val());
        console.log($('describe').val());
    });
});

html, body {
    margin: 0;
    padding: 0;
    min-width: 900px;
    font-family: Arial;
}

textarea {
    background-color: #f5f5f5;
    outline: none;
}

span {
    display: inline;
    font-size: 9px;
    padding-left: 18px;
    cursor: pointer;
}

h3 {
    font-size: 15px;
    padding: 0 0 0 20px;
    display: inline;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    height: 105px;
    width: 470px;
    padding: 14px 0 16px 0;
    margin: 26px 0 22px 0;
    background-color: white;
}

.li {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 20px;
}

.clearfix::after { 
    content: "";
    clear: both;
    display: block;
}

.wrapper {
    overflow-y: hidden;
    margin: 50px auto;
    background-color: #f5f5f5;
    height: 768px;
    width: 1000px;
}
    
.left-item {
    font-size: 13px;
}

.left-container{
    float: left;
    margin-left: 20px;
}


.right-item {
    font-size: 13px;
}

.right-container{
    float: right;
    margin-right: 20px;
}

    .right-form{
        width: 430px;
        background-color: #FFFFFF;
        margin-top: 26px;
        padding: 1px 0 14px 40px;
    }

.title{
    margin: 29px 0 10px;
    font-size: 14px;
    color: #adb4c5;
}

.describe{
    margin: 29px 0 10px;
    font-size: 14px;
    color: #adb4c5;
}

#title-box{
    padding: 0px 5px;
    outline: none;
    background-color: #f5f5f5;
    border: 1px solid black;
    line-height: 40px;
    font-size: 30px;
}

#button {
    background-color: #2174fd;
    border: none;
    color: white;
    padding: 18px 56px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 22px 0px;
    cursor: pointer;
    outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>To DO list</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="wrapper clearfix">
        <div class="left-container clearfix">
            <div class="left-item">
                <h2>left side:</h2>
            </div>
            <div class="list-container">
                <ul>
                    
                </ul>
            </div>  
        </div>
            <div class="right-container clearfix">
                <div class="right-item">
                    <h2>right-side</h2>
                </div>
                <div class="right-form">
                    <p class="title">* title</p>
                    <input id="title-box" type="text" value="" size="21">
                    <p class="describe">* describe</p>
                    <textarea id="describe-box" name="describe" rows="15" cols="46" value=""></textarea>
                    <button id="button">add</button>
                </div>  
            </div>
    </div>
</body>
</html>

【问题讨论】：

` $('ul').append("
+ $('#title-box') + ❌

"<li><h3>" + $('#title-box').val() + "<span>&#10060;</span></h3></li>"

var title = $('#title-box'); var describe = $('#describe-box'); $(function(){ $('#button').click(function(){ $('ul').append('<li><h3>' + $('#title-box').val() + '<span>❌</span></h3></li>'); console.log($('title').val()); console.log($('describe').val()); }); });

html, body { margin: 0; padding: 0; min-width: 900px; font-family: Arial; } textarea { background-color: #f5f5f5; outline: none; } span { display: inline; font-size: 9px; padding-left: 18px; cursor: pointer; } h3 { font-size: 15px; padding: 0 0 0 20px; display: inline; } ul { list-style-type: none; padding: 0; } li { height: 105px; width: 470px; padding: 14px 0 16px 0; margin: 26px 0 22px 0; background-color: white; } .li { border-bottom: 1px solid #f5f5f5; padding-bottom: 20px; } .clearfix::after { content: ""; clear: both; display: block; } .wrapper { overflow-y: hidden; margin: 50px auto; background-color: #f5f5f5; height: 768px; width: 1000px; } .left-item { font-size: 13px; } .left-container{ float: left; margin-left: 20px; } .right-item { font-size: 13px; } .right-container{ float: right; margin-right: 20px; } .right-form{ width: 430px; background-color: #FFFFFF; margin-top: 26px; padding: 1px 0 14px 40px; } .title{ margin: 29px 0 10px; font-size: 14px; color: #adb4c5; } .describe{ margin: 29px 0 10px; font-size: 14px; color: #adb4c5; } #title-box{ padding: 0px 5px; outline: none; background-color: #f5f5f5; border: 1px solid black; line-height: 40px; font-size: 30px; } #button { background-color: #2174fd; border: none; color: white; padding: 18px 56px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 22px 0px; cursor: pointer; outline: none; }

+ $('#title-box') + ❌