javaScript动态添加Li元素的实例

JavaScript动态添加Li元素是前端开发中常见的一项技术，可以将新的列表项（li元素）动态添加到现有的HTML文档中。在给定的文件内容中，包含了两种主要的技术实现：使用innerHTML和使用createElement。下面将对这两种方法进行详细解读，并解释相关的知识点。 来看使用innerHTML的方法。innerHTML属性允许我们通过JavaScript获取或设置某个HTML元素内部的HTML代码。在这个示例中，通过获取ul元素（其id为“J_List”）的innerHTML属性，并在其末尾添加新的li元素的HTML代码，从而实现动态添加元素的功能。在创建新li元素时，使用了HTML转义字符来处理包含双引号的字符串，这样做是为了防止字符串被错误地解析为JavaScript代码的一部分。 接着，来看使用createElement的方法。与innerHTML不同，createElement方法用于创建新的DOM元素。在本示例中，定义了addLi函数，该函数接收姓名、邮箱和电话号码作为参数，并使用createElement来创建一个新的li元素。通过setAttribute方法为新创建的li元素设置class属性，然后使用addSpan和addDelBtn两个辅助函数分别添加显示内容和删除按钮。使用appendChild方法将新创建的li元素添加到ul元素的子节点列表的末尾。 addSpan函数负责创建span元素并设置其内容，而addDelBtn函数则负责创建一个按钮并为其设置事件监听器。按钮的事件监听器通过设置onclick属性来指定删除按钮被点击时调用delBtnData函数，该函数的作用是找到按钮所在的li元素，并将其从父节点ul中移除。 在处理添加删除按钮时，需要注意事件冒泡的原理，即点击按钮时，该事件不仅在按钮上触发，还会向上传递到父节点，直至文档的根节点。在delBtnData函数中，我们通过obj参数获取当前事件发生的节点，并使用两层parentNode来定位到li元素，然后将其从DOM树中移除。 整体而言，本示例中演示了使用JavaScript动态操作DOM的技术，这是前端开发中的基础技能之一。无论是使用innerHTML还是createElement方法，核心目标都是通过编程手段操作DOM树，实现动态内容的增删改查。在实际应用中，选择哪种方法取决于具体的需求场景以及开发者的偏好。如果需要插入的内容结构复杂，通常推荐使用createElement方法，因为它不会对现有内容造成不必要的解析，且执行效率更高。如果添加的内容较为简单，且不涉及复杂的DOM操作，使用innerHTML可能会更简单一些。无论是哪种方法，都需要特别注意安全问题，如避免XSS攻击，确保插入的HTML内容是安全的。