JavaScript数据渲染-点击按钮实现添加数据功能

最新推荐文章于 2024-07-06 00:11:00 发布

李桥桉

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量715

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wodegeCSDN/article/details/130222661

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

案例1-点击按钮实现添加功能

效果如下

代码如下

<body>
    <button>添加</button>
    <ul>
        <!-- <li>热门新闻</li> -->
    </ul>
    
</body>
    <script>
        var news = ['热门新闻','娱乐新闻','财经新闻']
        var oul = document.querySelector('ul');

        render()
        //渲染数据，将数据渲染到页面
        function render(){
            dom = '';
            for(var i = 0;i<news.length;i++ ){
            dom += `<li>${news[i]}</li>`;
            }
        oul.innerHTML = dom;
        }
        //谁在触发事件就需要获取谁，用于绑定事件
        var btn1 = document.querySelector('button');
        btn1.addEventListener('click',function(){
            var name = prompt('请输入要添加的新闻标题');
            news.push(name) //此处添加数据后，页面中并没有渲染
            console.log(news);
            //当数据操作完成后，希望将数据渲染到页面上，调用以下渲染函数
            render();
        })
    </script>