CODEWITHSUNDEEP
javascriptjqueryhtml
TheKingPinMirza
TheKingPinMirza

Reputation: 8922

Create new div attribute with value

I have the following jQuery code that creates new Div and append it to parent with some attributes.

 $.each(data.ConsultantDetails.ScopeOfSevrices, function (index) {
   $("#parentOptionDiv").append($('<div/>', {
     "id": data.ConsultantDetails.ScopeOfSevrices[index].Value,
     "class": 'item',
     "data-value":''
   }))
 });

It renders HTML 

<div id="9" class="item" data-value=""></div>

How to put value in between <div> My Value </div>

Expected

<div id="9" class="item" data-value="">MY Value</div>

Upvotes: 1

Views: 113

Answers (3)

user5886944
user5886944

Reputation: 174

This is how to do it with plain JavaScript ( works with JQuery! )

var div = document.createElement("div"); // Create new element or use existing element
div.innerText = "The text";              // Set the text
// or ..
var text = document.createTextNode("The text"); // Create a text node
div.appendChild(text);                          // Append text node to div
// Or if you want to append another element
var anotherElement = document.createElement("div"); // Create new element or use existing element
div.appendChild(anotherElement);                    // Append the other element into the div

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Use text like this

$("#parentOptionDiv").append($('<div/>', {
  "class": 'item',
  "data-value": '',
  "text": "My value"
}))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentOptionDiv"></div>

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074475

Use the text option:

$.each(data.ConsultantDetails.ScopeOfSevrices, function (index) {
  $("#parentOptionDiv").append($('<div/>', {
    "id": data.ConsultantDetails.ScopeOfSevrices[index].Value,
    "class": 'item',
    "data-value":'',
    "text": "My Value"
  }))
});

This is covered by the documentation for that form of $() call:

As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.

Upvotes: 3

Related Questions