HTML表单动态渲染与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/Timememory829/article/details/135039367

本文介绍了如何使用HTML和JavaScript实现一个简单的文本输入框，用户输入内容后，会随机显示在列表中。当点击删除按钮时，内容会被移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <textarea placeholder="请输入内容" id="area" cols="90" rows="30" maxlength="200"></textarea>
            <div>
                <span class="a" id="a">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>
        <div class="contentList">
            <ul id="list"></ul>
        </div>
    </div>
    <script>
        let dataArr = [{
            uname: '匿名'
        }]
        let a = document.querySelector('.a')
        let send = document.querySelector('#send') 
        let list = document.querySelector('#list') 
        area.oninput = function() {
            a.innerText = area.value.length
        }
        send.onclick = function() {
                let li = document.createElement('li')
                let index = parseInt(Math.random() * dataArr.length)
                li.innerHTML = `
                <div class="info">
                  <span class="username">${dataArr[index].uname}</span>
                </div>
                <div class="content">${area.value}</div>
                <span class="the_del"></span>`
                list.insertBefore(li, list.children[0])
                li.querySelector('.the_del').onclick = function() {
                    list.removeChild(this.parentNode)
            }
            area.value = ''
            a.innerText = 0
        }
    </script>
</body>
</html>