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

最新推荐文章于 2024-05-11 21:58:00 发布

原创

最新推荐文章于 2024-05-11 21:58:00 发布 · 931 阅读

收录于

当前文章被以下社区和专栏收录：

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

案例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.

标签