js如何改变新增元素页面内容

最新推荐文章于 2024-12-29 11:37:24 发布

原创最新推荐文章于 2024-12-29 11:37:24 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js基础

PC 专栏收录该内容

2 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用JavaScript与jQuery来动态地为网页中的元素添加新的内容，并进一步修改这些新增内容。文章重点介绍了点击事件的处理及事件冒泡的阻止。

js如何改变新增元素页面内容

<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
    <script src="jquery.min.js"></script>
    <script>
        $('ul li').click(function(){  
          var html = '<div class="add" id="add"></div>';
            $('.add').remove();
            $(this).append(html);
          
        })
        $("ul li").on("click",".add",function(e){
            e.stopPropagation();//需要阻止冒泡
            $('ul li').find('.add').text('aaaaaaa');
        });
    </script>
</body>