Jquery append data attribute value dynamically using html

Question

I am using jquery sortable library where i will drop item from one list to another.In the process of dropping item i will change html content.I have data attribute also.

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);

},

in alert i get correct appended value but in data-job it will set only hm and evt.item.innerText will not append

Can any one help me to append it properly.

Thank you

Try data-job="'+df+'" quotes for attribute. Otherwise your code seems correct — murli2308
– murli2308, Commented Nov 18, 2019 at 13:31
You'd be better off just deleting the question as it was a typographical mistake — Rory McCrossan
– Rory McCrossan, Commented Nov 18, 2019 at 13:41

murli2308 · Accepted Answer · 2019-11-18 13:42:54Z

1

You are missing quotes in the expression

Use below code data-job="'+df+'"

answered Nov 18, 2019 at 13:42

murli2308

3,0224 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2019-11-18 13:56:53Z

Since you have space between the text, the text after the space is treated as another attribute of the element. You should wrap the text with quotes data-job="'+df+'".

Though I prefer using Template literals which is more cleaner and easier to use:

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

Demo:

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>

Collectives™ on Stack Overflow

Jquery append data attribute value dynamically using html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related