本文介绍了如何使用 JavaScript 或 jQuery 操作 DOM 来实现 HTML 元素的起始和结束标签的创建与插入。重点在于理解 jQuery 和 JavaScript 的工作方式，它们操作的是 DOM 节点，而非简单的 HTML 字符串。通过示例代码，展示了如何创建 <div> 元素，并将现有的 <li> 元素移动到该 <div> 元素中，从而达到期望的布局效果。
在使用 JavaScript 或 jQuery 操作 HTML 结构时，需要理解它们操作的是 DOM（文档对象模型），而不是简单的 HTML 字符串。DOM 将 HTML 文档表示为一个树形结构，每个 HTML 元素都是一个节点。因此，我们不能像处理字符串那样直接添加起始标签或结束标签。
正确的方法是创建 DOM 元素，然后将其他元素移动到该元素中。下面通过一个具体的例子来说明如何实现将列表中的前几个和后几个 <li> 元素分别包裹在不同的 <div> 元素中，从而创建不同的列。
示例
立即学习“Java免费学习笔记（深入）”；
假设我们有以下 HTML 结构：
<ul class="sub-menu" style="display:flex"> <li class="open1col"><a>Treatment Trials</a></li> <li class=""><a>Alzheimer’s</a></li> <li class="close1col open2col"><a href="">Asthma</a></li> <li class=""><a>COVID-19 Treatment</a></li> <li class="close2col"><a>COPD</a></li> </ul>
我们希望将前三个 <li> 元素和后两个 <li> 元素分别包裹在 class="sub-menu-col" 的 <div> 元素中。
使用 jQuery 实现
$(document).ready(function() {
// 创建第一个 div.sub-menu-col
const col1 = $('<div class="sub-menu-col"></div>');
// 将前三个 li 元素移动到第一个 div 中
$(".sub-menu li:lt(3)").appendTo(col1);
// 将第一个 div 添加到 ul.sub-menu 中
$(".sub-menu").append(col1);
// 创建第二个 div.sub-menu-col
const col2 = $('<div class="sub-menu-col"></div>');
// 将后两个 li 元素移动到第二个 div 中
$(".sub-menu li:gt(0)").appendTo(col2);
// 将第二个 div 添加到 ul.sub-menu 中
$(".sub-menu").append(col2);
// 删除原始的 li 元素
$(".sub-menu li:not(.sub-menu-col li)").remove();
// 将创建的div重新排序
$(".sub-menu").append($(".sub-menu-col"));
});代码解释
- $('<div class="sub-menu-col"></div>'): 创建一个新的 <div> 元素，并设置 class 属性为 sub-menu-col。
- $(".sub-menu li:lt(3)").appendTo(col1): 选择前三个 <li> 元素，并将它们移动到 col1 中。:lt(3) 是一个 jQuery 选择器，用于选择索引小于 3 的元素（即前三个元素）。appendTo() 方法将选中的元素添加到指定的元素中。
- $(".sub-menu").append(col1): 将 col1 添加到 ul.sub-menu 的末尾。
- $(".sub-menu li:gt(0)").appendTo(col2): 选择后两个 <li> 元素，并将它们移动到 col2 中。:gt(0) 是一个 jQuery 选择器，用于选择索引大于 0 的元素。
- $(".sub-menu").append(col2): 将 col2 添加到 ul.sub-menu 的末尾。
- $(".sub-menu li:not(.sub-menu-col li)").remove();: 移除原始的 <li> 元素，因为它们已经被移动到新的 <div> 元素中。
- $(".sub-menu").append($(".sub-menu-col"));: 重新排序 <div> 元素，确保它们在 <ul> 元素中按正确的顺序排列。
使用 JavaScript 实现
document.addEventListener('DOMContentLoaded', function() {
const subMenu = document.querySelector('.sub-menu');
const listItems = subMenu.querySelectorAll('li');
// 创建第一个 div.sub-menu-col
const col1 = document.createElement('div');
col1.classList.add('sub-menu-col');
// 将前三个 li 元素移动到第一个 div 中
for (let i = 0; i < 3; i++) {
col1.appendChild(listItems[i].cloneNode(true)); // 使用 cloneNode 避免从原位置移除
}
subMenu.appendChild(col1);
// 创建第二个 div.sub-menu-col
const col2 = document.createElement('div');
col2.classList.add('sub-menu-col');
// 将后两个 li 元素移动到第二个 div 中
for (let i = listItems.length - 2; i < listItems.length; i++) {
col2.appendChild(listItems[i].cloneNode(true)); // 使用 cloneNode 避免从原位置移除
}
subMenu.appendChild(col2);
// 删除原始的 li 元素
listItems.forEach(item => item.remove());
// 将创建的div重新排序
const cols = subMenu.querySelectorAll('.sub-menu-col');
cols.forEach(col => subMenu.appendChild(col));
});代码解释
- document.createElement('div'): 创建一个新的 <div> 元素。
- col1.classList.add('sub-menu-col'): 为 <div> 元素添加 sub-menu-col 类。
- col1.appendChild(listItems[i].cloneNode(true)): 将选中的 <li> 元素克隆后添加到 col1 中。cloneNode(true) 用于创建元素的深拷贝，确保复制元素及其所有子元素。
- subMenu.appendChild(col1): 将 col1 添加到 ul.sub-menu 的末尾。
- listItems.forEach(item => item.remove()): 移除原始的 <li> 元素，因为它们已经被移动到新的 <div> 元素中。
- cols.forEach(col => subMenu.appendChild(col)): 重新排序 <div> 元素，确保它们在 <ul> 元素中按正确的顺序排列。
注意事项
- 在移动 DOM 元素时，需要注意元素的引用关系。如果直接将元素移动到新的父元素中，元素会从原来的位置移除。如果需要保留原来的元素，可以使用 cloneNode(true) 方法创建元素的副本。
- 在选择元素时，可以使用 jQuery 选择器或 JavaScript 的 DOM API。jQuery 选择器更加简洁易用，但需要引入 jQuery 库。JavaScript 的 DOM API 更加原生，不需要依赖任何库。
- 确保在 DOM 加载完成后执行 JavaScript 代码，可以使用 $(document).ready() (jQuery) 或 document.addEventListener('DOMContentLoaded', function() {}) (JavaScript) 来实现。
总结
通过创建 DOM 元素，并将现有元素移动到新创建的元素中，可以实现对 HTML 结构的灵活操作。无论是使用 jQuery 还是 JavaScript，理解 DOM 的工作方式是至关重要的。避免直接操作 HTML 字符串，而是通过操作 DOM 节点来实现所需的功能。
