$.append(元素)不能重复插入元素，且会覆盖父节点

$.append(元素)不能重复插入元素，且会覆盖父节点

在使用 jsPlumb 加载已保存的流程图时遇到的问题，根据已有的数据使用$.append 插入 dom 节点生成流程图时失败

一 问题复现

apend 动态添加多个元素失效，只能添加一个且父元素消失

// 父元素
<div id="output" style="position: relative;"></div>;

// 子元素
flowChartJson.nodes.forEach((element: any, index: any) => {
  console.log(element);
  i++;

  $(".output")
    .append("div")
    .css("position", "relative")
    .css("top", element.PositionY)
    .css("left", element.PositionX)
    .css("width", " 80px")
    .css("height", "40px")
    .css("background-color", "#f6f6f6")
    .css("border", "2px solid rgba(0, 0, 0, 0.05)")
    .css("text-align", "center")
    .css("line-height", "40px")
    .css("font-family", "sans-serif")
    .css("border-radius", "4px")
    .css("margin-right", "60px")
    .text("节点" + i)
    .attr("id", element.nodeId);
});

图1 问题复现,上半部分为原图,下半部分为动态生成

---

二 解决方法

• 问题之一，父元素使用 id 标识，获取元素节点时用 id 获取，append 之后父元素消失
• 问题之二，append 基于 dom 原生 appendChild 方法，其添加的子元素会剪切移动已经有的，故多次添加时只是移动第一次动态生成的元素而已，最终导致只有一个元素

// append源码
append: function() {
        return this.domManip( arguments, function( elem ) {
            if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
                var target = manipulationTarget( this, elem );
                target.appendChild( elem );
            }
        });
    }

解决方法

// 父元素
<div class="output" style="position: relative;"></div>;

// 子元素
flowChartJson.nodes.forEach((element: any, index: any) => {
  console.log(element);
  i++;

  $(".output").append(
    '<div id="' +
      element.NodeId +
      '" style="position:absolute;top:' +
      element.PositionY +
      "px;left:" +
      element.PositionX +
      'px;width: 80px;height: 40px;color: #606266;background: #f6f6f6;border: 2px solid rgba(0, 0, 0, 0.05);text-align: center;line-height: 40px;font-family: sans-serif;border-radius: 4px;margin-right: 60px;">p2</div>'
  );
});

• 用 class 获取父元素
• 当添加多个节点时，直接将数据源放在 append 方法里面，这样的话，每次调用 append 方法都会重新生成 dom 对象
  

图2 解决效果