如何使用 jquery 在另一个 html 标签中添加完整的 html

Question

Hello I am trying to add complete html inside my paragraph using jquery for my ckeditor. Could you please help me out? here my code

<!-- Edit Course level Modal -->
<div class="modal fade full_width_mod" id="crud-modal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog col-md-12">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="courseLevelCrudModal"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <form id="course_form" action="{{ route('course-level.store') }}" method="POST" autocomplete="off" enctype="multipart/form-data">
        <div class="modal-body">
          <input type="hidden" name="course_id" id="course_id">
          @csrf
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <strong>Title</strong>
                <textarea name="meta_title" class="ck_editor form-control" id="meta_title"></textarea>
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <strong>Keywords</strong>
                <textarea name="meta_keywords" class="ck_editor form-control" id="meta_keywords"></textarea>
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <strong>Description</strong>
                <textarea name="meta_description" class="ck_editor form-control" id="meta_description"></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="btn-save" name="btnsave" class="btn btn-primary">Save</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

/* Edit Course Level */
$(document).on('click', '.edit-subject', function() {
  var course_id = $(this).data('id');
  $.get('course-level/' + course_id + '/edit', function(data) {
    $('#courseLevelCrudModal').html("Edit Course Level");
    $('#crud-modal').modal('show');
    $('#course_id').val(data.id);
    $("#meta_title").siblings(".ck-editor")
      .children(".ck-editor__main" )
      .children(".ck-editor__editable")
      .children("p")
      .html(data.meta_title);
    
    $("#meta_keywords").siblings(".ck-editor")
      .children(".ck-editor__main" )
      .children(".ck-editor__editable")
      .children("p")
      .html(data.meta_keywords);

    $("#meta_description").siblings(".ck-editor")
      .children(".ck-editor__main" )
      .children(".ck-editor__editable")
      .children("p")
      .html(data.meta_description);
  })
});

Below is the data that I am getting within my 'data.meta_description'

<h1>CS Executive Mod-1</h1>
<div>CS Executive is Second Level of Company Secretary Course. Admission to the CS Executive Course is open throughout the year Students who have passed CSEET (CS foundation) exam is eligible for CS Executive registration and CS Exam is conducted twice in a year in June &amp; December.</div>
<div><br>Eligibility for Admission<br><br></div>
<div>Eligibility or Qualification to registration for CS Executive course: Passing of CS Executive Entrance Test (CSEET) is mandatory for all candidates to register for CS Executive Programme, except a few exempted categories of candidates.</div>
<div>All Graduates/ Post Graduates who were hitherto eligible for registration directly to CS Executive Programme, are also required to pass the CSEET to become eligible for registration to Executive Programme.</div>
<div><br>Registration Fee for CS Executive<br><br></div>
<div>Registration Fee of CS Executive Course Rs.10600 for both Group, 50% rebate in CS Executive Registration fee for SC and ST Category Students.</div>
<div><br>Examination Fee of CS Executive<br><br></div>
<div>Examination Fee of CS Executive Course Rs.1200 for one Group and Rs. 2400 both Group, 50% rebate in CS Executive Registration fee for SC and ST Category Students.</div>
<div><br>Syllabus for CS Executive Course<br><br></div>
<div>Syllabus for CS Executive Course have been divided in two Groups</div>
<div><strong>Module – I</strong></div>
<ol>
  <li>
    <a href="https://toplad.in/cs/paper/jurisprudence-interpretation-&amp;-general-laws-cse-paper-1-cs-executive-module-1">Jurisprudence, Interpretation &amp; General Laws (CSE Paper-1)</a>
  </li>
  <li>
    <a href="https://toplad.in/cs/paper/company-law-cse-paper-2-cs-executive-module-1">Company Law (CSE Paper-2)</a>
  </li>
  <li>
    <a href="https://toplad.in/cs/paper/setting-up-of-business-entities-and-closure-cse-paper-3-cs-executive-module-1">Setting up of Business Entities and Closure (CSE Paper-3)</a>
  </li>
  <li>
    <a href="https://toplad.in/cs/paper/tax-laws-cse-paper-4-cs-executive-module-1">Tax Laws (CSE Paper-4)</a>
  </li>
</ol>
<div><br>Passing Criteria<br><br></div>
<div>CS Executive Examination Passing Criteria: Student be declared ‘PASS’ in CS Executive on securing 40% marks in each paper and 50% marks in the aggregate.</div>
<div><strong>Exemption:</strong> Candidates who have passed the Final Examination of The Institute of Chartered Accountants of India (ICAI) and/or The Institute of Cost Accountants of India (ICMAI) are exempted from CSEET and shall pay `5,000 (Rupees Five Thousand Only) towards exemption fee at the time of Registration to CS Executive Programme.</div>
<div><br></div>

Only first header tag is showing to me for this code inside my paragraph tag

$("#meta_description").siblings(".ck-editor")
  .children(".ck-editor__main" )
  .children(".ck-editor__editable")
  .children("p")
  .html(data.meta_description);

Answer 1

You should use ckeditor's methods to set its value. It provides the method setHtml() just for these cases

// Your names (meta_title, meta_keywords, meta_description) may vary.

CKEDITOR.instances.meta_title.setHtml(data.meta_title);
CKEDITOR.instances.meta_keywords.setHtml(data.meta_keywords);
CKEDITOR.instances.meta_description.setHtml(data.meta_description);