如何强制.prepend（）和.append（）来添加DOM对象，而不是文本 [英] How to force .prepend() and .append() to add DOM objects, not text

问题描述

在某些情况下，jquery .prepend（）和 .append（）插入文本而不是DOM对象。
要重现，请运行代码段，然后按添加组链接在细节带。
插入的HTML显示为文本。

而不是这样，bootsrtap面板应该出现。

它看起来像jQuery prepend和append不会添加DOM对象的工作原因未知。

如何解决这个问题，以便在面板上显示新面板？

  $（function（）{var startpos，selected = $（[ ]），offset = {top：0，left：0}; $（'＃designer-detail-addband'）on（'click'，function（）{var $ this = $（this），$ parentpanel = $ this.parents（。designer-panel）。get（0）; $ parentpanel.prepend（'< div class =panel designer-panel>'+'< div class =panel-body designer- panel-bodystyle =height：1px>'+'< / div>'+'< div class =bg-warning>'+ '< div class =panel-footer>< i class =glyphicon glyphicon-chevron-up>'+'< / i>组合{0}：< span id =band {0} _exprcontenteditable =true>groupexpression< / span>'+'< / div>< / div>< / div> ;'）; $ parentpanel.append（'< div class =panel designer-panel>'+'< div class =panel-body designer-panel-bodystyle =height：1px>< / div> ;'+'< div class =bg-warning>'+'< div class =panel-footer>< i class =glyphicon glyphicon-chevron-up>'+'< ; / i>组页脚{0}'+'< / div>< / div>< / div>'）; }）; $（。designer-panel-body）。droppable（{accept：.designer-field}）; $（。designer-field）。draggable（{start：function（event，ui））{var $ this = $（this）; if（$ this.hasClass（ui-selected））{selected = $ .ui-selected）。each（function（）{var el = $（this）; el.data（offset，el.offset（））;}）;} else {selected = $（[]） ; $（。designer-field）。removeClass（ui-selected）;} offset = $ this.offset（）;}，drag：function（event，ui）{//同时拖动所有选定的元素var dt = ui.position.top  -  offset.top，dl = ui.position.left  -  offset.left; selected.not（this）.each（function（）{var $ this = $（this）; var elOffset = $ this .data（offset）; $ this.css（{top：elOffset.top + dt，left：elOffset.left + dl}）;}）;}}）; $（。panel-resizable）。resizable（{minWidth：100％，maxWidth：100％，minHeight：1}）;}）;  

  .panel-resizable {min-height：1px;溢出：隐藏保证金：0; padding：0;}。设计师字段{border：1px solid lightgray;白空间溢出：隐藏position：absolute;}。designer-panel-body {min-height：1px;溢出：隐藏保证金：0; padding：0;}。panel-footer {padding：0;}。designer-panel，.panel-body {margin：0; padding：0;}  

 < link rel =stylesheet href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>< link rel =stylesheethref =http://code.jquery.com /ui/1.11.4/themes/smoothness/jquery-ui.css\"><script src =http://code.jquery.com/jquery-1.11.3.min.js>< /脚本>< script src =http://code.jquery.com/ui/1.11.4/jquery-ui.js>< / script>< / head>< body> < div class ='panel designer-panel'> < div class ='panel-body designer-panel-body panel-resizable'style ='height：2cm'> < div class ='designer-field'style ='left：5px; top：6px; width：180px'> group 1 in group 1 header< / div> < div class ='designer-field'style ='left：54px; top：36px; width：160px'> group 1 in group 1 header< / div> < / DIV> < div class ='panel-footer'> Group 1 Header< / div> < / DIV> < div class ='panel designer-panel'> < div class ='panel-body panel-resizable'style ='height：1cm'> < div class ='designer-field'style ='left：24px; top：2px; width：140px'> detail in detail group< / div> < / DIV> < div class ='panel-footer panel-primary'>细节< a role =buttonid =designer-detail-addband>添加组< / a> < / DIV> < / DIV> < div class ='panel'> < div class ='panel-body panel-resizable'style ='height：1cm'> 
 

解决方案

p> .get 返回一个 HTMLElement 。这就是为什么它的附加字符串。

如果你想选择第一个元素，你应该使用：first selector 。

  $ parentpanel = $ this.parents（。designer-panel：first）; 
  

  $（function（）{var startpos，selected = $（[]），offset = {top：0，left：0}; $（'＃designer-detail-addband'）on（'click' ，function（）{var $ this = $（this），$ parentpanel = $ this.parents（。designer-panel：first）; $ parentpanel.prepend（'< div class =panel designer-panel> ;'+'< div class =panel-body designer-panel-bodystyle =height：1px>'+'< / div>'+'< div class =bg-warning> ;'+'< div class =panel-footer>< i class =glyphicon glyphicon-chevron-up>'+'< / i>组heade {0}：< span id = band {0} _exprcontenteditable =true>groupexpression< / span>'+'< / div>< / div>< / div>'）; $ parentpanel.app end（'< div class =panel designer-panel>'+'< div class =panel-body designer-panel-bodystyle =height：1px>< / div>'+ '< div class =bg-warning>'+'< div class =panel-footer>< i class =glyphicon glyphicon-chevron-up>'+'< / i& ;组页脚{0}'+'< / div>< / div>< / div>'）; }）; $（。designer-panel-body）。droppable（{accept：.designer-field}）; $（。designer-field）。draggable（{start：function（event，ui））{var $ this = $（this）; if（$ this.hasClass（ui-selected））{selected = $ .ui-selected）。each（function（）{var el = $（this）; el.data（offset，el.offset（））;}）;} else {selected = $（[]） ; $（。designer-field）。removeClass（ui-selected）;} offset = $ this.offset（）;}，drag：function（event，ui）{//同时拖动所有选定的元素var dt = ui.position.top  -  offset.top，dl = ui.position.left  -  offset.left; selected.not（this）.each（function（）{var $ this = $（this）; var elOffset = $ this .data（offset）; $ this.css（{top：elOffset.top + dt，left：elOffset.left + dl}）;}）;}}）; $（。panel-resizable）。resizable（{minWidth：100％，maxWidth：100％，minHeight：1}）;}） 

pre class =snippet-code-css lang-css prettyprint-override> .panel-resizable {min-height：1px;溢出：隐藏保证金：0; padding：0;}。设计师字段{border：1px solid lightgray;白空间溢出：隐藏position：absolute;}。designer-panel-body {min-height：1px;溢出：隐藏保证金：0; padding：0;}。panel-footer {padding：0;}。designer-panel，.panel-body {margin：0; padding：0;}

 < link rel =stylesheet href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>< link rel =stylesheethref =http://code.jquery.com /ui/1.11.4/themes/smoothness/jquery-ui.css\"><script src =http://code.jquery.com/jquery-1.11.3.min.js>< /脚本>< script src =http://code.jquery.com/ui/1.11.4/jquery-ui.js>< / script>< / head>< body> < div class ='panel designer-panel'> < div class ='panel-body designer-panel-body panel-resizable'style ='height：2cm'> < div class ='designer-field'style ='left：5px; top：6px; width：180px'> group 1 in group 1 header< / div> < div class ='designer-field'style ='left：54px; top：36px; width：160px'> group 1 in group 1 header< / div> < / DIV> < div class ='panel-footer'> Group 1 Header< / div> < / DIV> < div class ='panel designer-panel'> < div class ='panel-body panel-resizable'style ='height：1cm'> < div class ='designer-field'style ='left：24px; top：2px; width：140px'> detail in detail group< / div> < / DIV> < div class ='panel-footer panel-primary'>细节< a role =buttonid =designer-detail-addband>添加组< / a> < / DIV> < / DIV> < div class ='panel'> < div class ='panel-body panel-resizable'style ='height：1cm'> 
 

它使用 ParentNode.prepend 。 参考

In some cases jquery .prepend() and .append() insert text instead of DOM objects. To reproduce, run code snippet and press Add group link in detail band. Inserted html appears as text.

Instead of this, bootsrtap panels should appear.

It looks like jQuery prepend and append does not add DOM objects work for unknown reason.

How to fix this so that new panels appear before and after detail panel ?

$(function() {

  var startpos,
    selected = $([]),
    offset = {
      top: 0,
      left: 0
    };

  $('#designer-detail-addband').on('click', function() {
    var $this = $(this),
      $parentpanel = $this.parents(".designer-panel").get(0);

    $parentpanel.prepend('<div class="panel designer-panel">' +
      '<div class="panel-body designer-panel-body" style="height:1px">' +
      '</div>' +
      '<div class="bg-warning">' +
      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
      '</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' +
      '</div></div></div>');

    $parentpanel.append('<div class="panel designer-panel">' +
      '<div class="panel-body designer-panel-body" style="height:1px"></div>' +
      '<div class="bg-warning">' +
      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
      '</i> Group footer {0}' +
      '</div></div></div>');

  });






  $(".designer-panel-body").droppable({
    accept: ".designer-field"
  });

  $(".designer-field").draggable({
    start: function(event, ui) {
      var $this = $(this);
      if ($this.hasClass("ui-selected")) {
        selected = $(".ui-selected").each(function() {
          var el = $(this);
          el.data("offset", el.offset());
        });
      } else {
        selected = $([]);
        $(".designer-field").removeClass("ui-selected");
      }
      offset = $this.offset();
    },

    drag: function(event, ui) {
      // drag all selected elements simultaneously
      var dt = ui.position.top - offset.top,
        dl = ui.position.left - offset.left;
      selected.not(this).each(function() {
        var $this = $(this);
        var elOffset = $this.data("offset");
        $this.css({
          top: elOffset.top + dt,
          left: elOffset.left + dl
        });
      });
    }
  });



  $(".panel-resizable").resizable({
    minWidth: "100%",
    maxWidth: "100%",
    minHeight: 1
  });
});

.panel-resizable {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.designer-field {
  border: 1px solid lightgray;
  white-space: pre;
  overflow: hidden;
  position: absolute;
}
.designer-panel-body {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.panel-footer {
  padding: 0;
}
.designer-panel,
.panel-body {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <div class='panel designer-panel'>
    <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>

      <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>

      <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div>
    </div>

    <div class='panel-footer'>Group 1 Header</div>
  </div>

  <div class='panel designer-panel'>
    <div class='panel-body panel-resizable' style='height:1cm'>
      <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group</div>
    </div>
    <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a>
    </div>
  </div>

  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:1cm'>

      <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div>
    </div>
    <div class='panel-footer panel-warning'>Group 1 Footer</div>
  </div>

解决方案

.get returns a HTMLElement. That is why, its appending string.

If you wish to select first element, you should use :first selector.

$parentpanel = $this.parents(".designer-panel:first");

$(function() {

  var startpos,
    selected = $([]),
    offset = {
      top: 0,
      left: 0
    };

  $('#designer-detail-addband').on('click', function() {
    var $this = $(this),
      $parentpanel = $this.parents(".designer-panel:first");

    $parentpanel.prepend('<div class="panel designer-panel">' +
      '<div class="panel-body designer-panel-body" style="height:1px">' +
      '</div>' +
      '<div class="bg-warning">' +
      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
      '</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' +
      '</div></div></div>');

    $parentpanel.append('<div class="panel designer-panel">' +
      '<div class="panel-body designer-panel-body" style="height:1px"></div>' +
      '<div class="bg-warning">' +
      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
      '</i> Group footer {0}' +
      '</div></div></div>');

  });

  $(".designer-panel-body").droppable({
    accept: ".designer-field"
  });

  $(".designer-field").draggable({
    start: function(event, ui) {
      var $this = $(this);
      if ($this.hasClass("ui-selected")) {
        selected = $(".ui-selected").each(function() {
          var el = $(this);
          el.data("offset", el.offset());
        });
      } else {
        selected = $([]);
        $(".designer-field").removeClass("ui-selected");
      }
      offset = $this.offset();
    },

    drag: function(event, ui) {
      // drag all selected elements simultaneously
      var dt = ui.position.top - offset.top,
        dl = ui.position.left - offset.left;
      selected.not(this).each(function() {
        var $this = $(this);
        var elOffset = $this.data("offset");
        $this.css({
          top: elOffset.top + dt,
          left: elOffset.left + dl
        });
      });
    }
  });

  $(".panel-resizable").resizable({
    minWidth: "100%",
    maxWidth: "100%",
    minHeight: 1
  });
})

.panel-resizable {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.designer-field {
  border: 1px solid lightgray;
  white-space: pre;
  overflow: hidden;
  position: absolute;
}
.designer-panel-body {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.panel-footer {
  padding: 0;
}
.designer-panel,
.panel-body {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <div class='panel designer-panel'>
    <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>

      <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>

      <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div>
    </div>

    <div class='panel-footer'>Group 1 Header</div>
  </div>

  <div class='panel designer-panel'>
    <div class='panel-body panel-resizable' style='height:1cm'>
      <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group</div>
    </div>
    <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a>
    </div>
  </div>

  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:1cm'>

      <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div>
    </div>
    <div class='panel-footer panel-warning'>Group 1 Footer</div>
  </div>

It uses ParentNode.prepend instead. Reference

这篇关于如何强制.prepend（）和.append（）来添加DOM对象，而不是文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！