Jquery使用html动态追加数据属性值答案

【问题标题】：Jquery append data attribute value dynamically using htmlJquery使用html动态追加数据属性值
【发布时间】：2019-11-18 13:29:10
【问题描述】：

我正在使用 jquery 可排序库，我会将项目从一个列表拖放到另一个列表。在删除项目的过程中，我将更改 html 内容。我也有数据属性。

onAdd: function (evt) {            
  var df="hm "+evt.item.innerText;
  alert(df);
  var content='<div class="list-group-item " >'+evt.item.innerText+' its modified  <span class="badge badge-primary badge-pill float-right" data-job='+df+'>14</span></div>';

  $(evt.item).replaceWith(content);

},

在警报中我得到正确的附加值，但在 data-job 中它只会设置 hm 并且 evt.item.innerText 不会附加

谁能帮我正确追加它。

谢谢

【问题讨论】：

尝试使用data-job="'+df+'" 引号作为属性。否则你的代码看起来是正确的
@murli2308.add 作为答案我会接受的
你最好删除问题，因为这是一个印刷错误

标签： javascript jquery html

【解决方案1】：

表达式中缺少引号

使用下面的代码 data-job="'+df+'"

【讨论】：

【解决方案2】：

由于文本之间有空格，空格后面的文本被视为元素的另一个属性。您应该用引号 data-job="'+df+'" 将文本括起来。

虽然我更喜欢使用Template literals，它更干净、更易于使用：

模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。在 ES2015 规范的早期版本中，它们被称为“模板字符串”。

演示：

function test(evt) {
  var df="hm "+evt.target.innerText;
  var content=`<div class="list-group-item">evt.target.innerText its modified  <span class="badge badge-primary badge-pill float-right" data-job='${df}'>14</span></div>`;
  console.log(df);
  console.log(content);
  $('body').append(content);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div onclick="test(event)">test</div>

【讨论】：