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

最新推荐文章于 2024-03-04 10:02:19 发布

李桥桉

最新推荐文章于 2024-03-04 10:02:19 发布

阅读量756

点赞数

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

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

版权

该案例展示了如何使用JavaScript实现点击按钮向网页列表中添加新闻功能。代码中定义了一个新闻数组，并通过事件监听器在按钮被点击时弹窗获取新新闻标题，将其添加到数组中，并重新渲染列表以显示新增内容。

摘要由CSDN通过智能技术生成

案例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;
        }
        //谁在触发事件