如何使用 JS 或 jQuery 仅创建 HTML 元素的起始标签？答案

【问题标题】：How to create only a starting tag of an HTML element using JS or jQuery?如何使用 JS 或 jQuery 仅创建 HTML 元素的起始标签？
【发布时间】：2022-06-23 01:00:46
【问题描述】：

我有一个固定的 wp 子菜单列表，看起来像这样：

<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>

我想将前 3 个和最后 2 个元素包装成 2 个 <div class="sub-menu-col"> 元素，以便它们并排形成两个不同的列。

顺便说一下这个内容是不可编辑的，我只能给li标签加类。

我试过这样的jQuery：

var open1col='<div class="sub-menu-col">';
var close1col='</div><div class="sub-menu-col">';
var close2col='</div>'; 

    $( ".sub-menu li:first-child" ).before(open1col);
        
        $( ".sub-menu li:nth-child(3)" ).before(close1col);
            
        $( "sub-menu li:last-child" ).after(close2col); 
    });

但它在打开后立即关闭了div，3个<li>项目掉到了外面。

如何仅将开始和结束标记添加为 html 字符串？

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

虽然 jQuery 将字符串作为输入，但它在 DOM 上运行。

没有开始标签或结束标签，只有元素、文本节点和其他节点。

所以，你不能这样做。

与 DOM 一起工作，而不是试图对抗它。

如果您想创建一个 div，然后在其中移动一些元素，请执行那个。

const col = jQuery('<div class="sub-menu-col">');
col.append($( ".sub-menu li:first-child"));

等等

【讨论】：