0

I have a dynamically created HTML in JavaScript.I have a value that I need to append it in the dynamically created text field. my code runs like this

var itemID = 25;


content = document.createElement('div');
var html = `
      <div class="panel-container">
        
        <hr class ="hr-panel">
        <input type="text" placeholder="DB ID" id="ItemID" class ="col-xs-1 col-sm-2 col-md-2 col-lg-2 input-input-row">
        <div class ="input-row-spacer"></div>
        <div class ="input-row-spacer"></div>
        <input type="file">
        <hr class="panel-vertical-spacer">
        <hr class="hr-panel">
        <div class="row">
            <div class="col-md-12">
                <div class="panel-validation-controls-container">
                    <button class="btn btn-default col-xs-1 col-sm-2 col-md-2 col-lg-2 btn-input-row" type="button"><span class="span-input-row glyphicon glyphicon-ok"> </span> OK</button>
                    <div class="input-row-spacer"></div>
                    <button class="btn btn-default col-xs-1 col-sm-2 col-md-2 col-lg-2 btn-input-row" type="button"><span class="span-input-row glyphicon glyphicon-remove"> </span> Cancel</button>
                </div>
            </div>
        </div>
    </div>`;

$(content).append(html);
$('#' + itemID + 'ItemId').append(html);
}

How can I insert the value 25 into my text field. Thanks in advance

Improve this question

1 Answer 1

Reset to default
1

you need to append HTML into div then find text box by id and put the value into the text box

  var html = `
      <div class="panel-container">
        
        <hr class ="hr-panel">
        <input type="text" placeholder="DB ID" id="ItemID" class ="col-xs-1 col-sm-2 col-md-2 col-lg-2 input-input-row">
        <div class ="input-row-spacer"></div>
        <div class ="input-row-spacer"></div>
        <input type="file">
        <hr class="panel-vertical-spacer">
        <hr class="hr-panel">
        <div class="row">
            <div class="col-md-12">
                <div class="panel-validation-controls-container">
                    <button class="btn btn-default col-xs-1 col-sm-2 col-md-2 col-lg-2 btn-input-row" type="button"><span class="span-input-row glyphicon glyphicon-ok"> </span> OK</button>
                    <div class="input-row-spacer"></div>
                    <button class="btn btn-default col-xs-1 col-sm-2 col-md-2 col-lg-2 btn-input-row" type="button"><span class="span-input-row glyphicon glyphicon-remove"> </span> Cancel</button>
                </div>
            </div>
        </div>
    </div>`;
  
  $('div').append(html);
  
  $('#ItemID').val(25)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>

just like this way.

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

1 Comment

Thank you @neeraj pathak

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.