jquery 关于如何使用javascript增加虚拟节点的问题

ecfsfe2w 于 2023-02-03 发布在 jQuery

关注(0)|答案(2)|浏览(191)

我有一套ui和li的结构，目前我有一个需求，就是把API拼接成4个li的数据，放在原来li的后面添加！我用的是appendChild方法，但是需要先用这个方法创建一个节点，让div = document.createElement（'div'）;但是这样会导致新建的标签增加一个div，这是我不想要的标签，我想问一下是否可以创建一个虚空节点，并把li放在里面，具体怎么做我也不知道，希望得到大家的帮助，我写了一个例子比如下面的案例代码来模拟我的问题，谢谢PS：我曾经尝试过使用innerHTML，但这会在我的实际项目中添加数据时覆盖原始内容，所以不起作用。

let str;
let wrap = document.querySelector('.wrap');
let div = document.createElement('div');
str += `<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
`

div.innerHTML = str;
wrap.appendChild(div);

<ul class="wrap">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

jquery

来源：https://stackoverflow.com/questions/75319041/questions-about-how-to-use-javascript-to-increase-virtual-nodes

2条答案

按热度按时间

vyswwuz21#

是否可以创建一个虚拟的空节点并在其中放入<li>元素？
是的，这正是DocumentFragment所做的。一旦将片段附加到<ul>，中间的“虚拟”节点将被跳过，其内容将被传输。
但是，片段没有.innerHTML属性。对于您的用例，最好使用insertAdjacentHTML：

const wrap = document.querySelector('.wrap');
const str = `<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
`;
wrap.insertAdjacentHTML('beforeend', str);

<ul class="wrap">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

赞(0）回复(0）举报 2023-02-03

xxe27gdn2#

您添加了jquery标记，所以我将使用它，因为这样更简单。使用jQuery，您可以一次添加多个<li>标记，这是首选，因为每次DOM更新都是昂贵的。

let html = `<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>`;
$('.wrap').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="wrap">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

赞(0）回复(0）举报 2023-02-03

我来回答

jquery 关于如何使用javascript增加虚拟节点的问题

2条答案

相关问题

热门标签

最新问答