使用jQuery动态生成多个DOM-Node级别

Question

我目前正在做一个小的计算器项目，其中以前的计算被保存到一个数据库中，该数据库将被调用并在UI上呈现为一个列表。在HTML中，列表元素应该大致如下所示：

<div class="item">
   <div class="item__value">1.197</div>
   <div class="item__btn">
     <button class="item__btn--el item__btn--del"><i class="ion-ios-close-outline"></i></button>
     <button class="item__btn--el item__btn--pull"><i class="ion-ios-refresh-outline"></i></button>
   </div>
</div>

使用jQuery，我只能走到第一层。由于前面的计算是以数组的形式从DB返回的，所以我做了一个小函数，为其中的每一个创建一个项，但我不能比第一个div更深入。

const popCalc = function(arr, area) {
    arr.forEach(el => {
        $(area)
            .append(
               $(document.createElement('div'))
                    .text(el.result)
                    .addClass('item')
            )
    });
};

我还尝试将更多的子元素附加到创建的'div‘中，但没有帮助，因为系统返回了一个错误。

const popCalc = function(arr, area) {
    arr.forEach(el => {
        $(area)
            .append(
               $(document.createElement('div'))
                .addClass('item')
                .appendChild(
                    $(document.createElement('div'))
                    .addClass('item__value')
                    .text(el.result)
            )
        )
    });
};

那么，有没有人有什么建议，我如何生成一个'div‘并在其中添加另外两个’div‘，同时使用动态源代码？

Answer 1

我认为append适用于标准的javascript而不是jQuery，您可能只需要将其替换为appendChild：

​

const arr = [{ result: 'result 1' }, { result: 'result 2' }];

const popCalc = function(arr, area) {
  arr.forEach(el => {
    $(area)
      .append(
        $(document.createElement('div'))
          .addClass('item')
          .append(
            $(document.createElement('div'))
              .addClass('item__value')
              .text(el.result),
            $(document.createElement('div'))
              .addClass('item__btn')
              .append($(document.createElement('Button')).html('A button'))
          )
      )
  });
};

popCalc(arr, $('#area'));

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

​

如果您正在处理一些复杂的事情，使用一些模板可能会更好，如下面的答案所示(尽管这可能比使用document.createElement慢(但可能还不够慢，这取决于您正在做什么))：https://stackoverflow.com/a/25852490/14454939

处理这类事情的另一种方法是以可读性更强的形式构建结构，然后使用代码构建DOM元素：

​

const arr = [{ result: 'result 1' }, { result: 'result 2' }];

const new_item_def = (el) => ({
  tag: 'div', className: 'item', children: [
    { tag: 'div', className: 'item__value', innerHTML: el.result },
    { tag: 'div', className: 'item__btn', children: [
        { tag: 'button', innerHTML: 'A button' }
      ]
    },
  ]
});

const element_for_def = ({ tag, children, ...attr }) => {
  const element = Object.assign(document.createElement(tag), attr);

  if(children && children.length > 0)
    append_children_to_ele(element, children);

  return element;
};

const append_to_element = (parent) => (child) => parent.appendChild(child);

const append_children_to_ele = (parent, children) =>
  children
    .map(element_for_def)
    .forEach(append_to_element(parent));

const popCalc = function(arr, area) {
  arr.forEach(
    el => append_to_element(area)( element_for_def(new_item_def(el)) )
  );
};

popCalc(arr, document.getElementById('area'));

<div id="area"></div>

​