这里我想使用JavaScript结果向视图添加一些div。
我尝试在页面加载时隐藏div，然后通过javascirpt显示它。
但是发生的事情是，首先它在加载中显示div内容，然后从JavaScript中隐藏。
所以我想，我会在视图中给予一个主div，

<div id = "ManagerSection">

</div>

然后把我的代码从JavaScript放到div中。
所以我试了这个，

function myfunction() {

  document.getElementById("ManagerSection").innerHTML +=
  "<h3>This is the text which has been inserted by JS</h3>";

}

这将添加文本，但在我的场景中，我想添加这个

<div class="col-lg-4 col-md-4 order-1">
   <div class="row">
     <div class="col-lg-6 col-md-12 col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Pending Approvals</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
     <div class="col-lg-6 col-md-12 col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Pending Approvals</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="col-12 col-md-8 col-lg-4 order-3 order-md-2">
   <div class="row">
     <div class="col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu" aria-labelledby="cardOpt1">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Outlets</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
     <div class="col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu" aria-labelledby="cardOpt1">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Outlets</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
   </div>
 </div>

当我把它复制到JavaScript中的```双引号``中时，它就像javascript中的c#代码一样复制。
想知道怎么做吗？