如何通过JavaScript向HTML视图添加复杂div元素

你遇到的问题是复杂HTML里的换行、双引号与JS字符串语法冲突导致的，以下几种方案可解决：

方法1：使用ES6模板字符串（最便捷） #

用反引号（`）包裹HTML内容，支持直接换行，内部双引号无需转义，完美适配复杂结构：

function myfunction() {
  const managerHTML = `
    <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>
  `;
  document.getElementById("ManagerSection").innerHTML = managerHTML;
}

方法2：转义HTML中的双引号 #

如果环境不支持ES6，需把HTML里所有双引号（"）转义成\"，同时换行用字符串拼接或转义符\n，但这种方式维护成本高：

function myfunction() {
  document.getElementById("ManagerSection").innerHTML +=
    "<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\">" +
    // ... 剩余所有HTML都需转义双引号并拼接
    "</div>";
}

方法3：通过DOM API逐元素创建（更安全） #

若需动态修改元素属性或避免HTML注入风险，可使用原生DOM方法创建并组装元素：

function createCard(title, iconSrc) {
  const cardCol = document.createElement('div');
  cardCol.className = 'col-lg-6 col-md-12 col-6 mb-4';
  
  const card = document.createElement('div');
  card.className = 'card';
  
  const cardBody = document.createElement('div');
  cardBody.className = 'card-body';
  
  // 组装card-title部分
  const cardTitle = document.createElement('div');
  cardTitle.className = 'card-title d-flex align-items-start justify-content-between';
  
  const avatar = document.createElement('div');
  avatar.className = 'avatar flex-shrink-0';
  const img = document.createElement('img');
  img.src = iconSrc;
  img.alt = title;
  img.className = 'rounded';
  avatar.appendChild(img);
  
  // 组装dropdown部分
  const dropdown = document.createElement('div');
  dropdown.className = 'dropdown';
  const btn = document.createElement('button');
  btn.className = 'btn p-0';
  btn.type = 'button';
  btn.id = 'cardOpt3';
  btn.setAttribute('data-bs-toggle', 'dropdown');
  btn.setAttribute('aria-haspopup', 'true');
  btn.setAttribute('aria-expanded', 'false');
  const icon = document.createElement('i');
  icon.className = 'bx bx-dots-vertical-rounded';
  btn.appendChild(icon);
  
  const dropdownMenu = document.createElement('div');
  dropdownMenu.className = 'dropdown-menu dropdown-menu-end';
  dropdownMenu.setAttribute('aria-labelledby', 'cardOpt3');
  
  const viewLink = document.createElement('a');
  viewLink.className = 'dropdown-item';
  viewLink.href = 'javascript:void(0);';
  viewLink.textContent = 'View More';
  
  const deleteLink = document.createElement('a');
  deleteLink.className = 'dropdown-item';
  deleteLink.href = 'javascript:void(0);';
  deleteLink.textContent = 'Delete';
  
  dropdownMenu.appendChild(viewLink);
  dropdownMenu.appendChild(deleteLink);
  dropdown.appendChild(btn);
  dropdown.appendChild(dropdownMenu);
  
  cardTitle.appendChild(avatar);
  cardTitle.appendChild(dropdown);
  
  // 组装文本部分
  const span = document.createElement('span');
  span.className = 'fw-semibold d-block mb-1';
  span.textContent = title;
  
  const h3 = document.createElement('h3');
  h3.className = 'card-title mb-2';
  h3.textContent = '0';
  
  cardBody.appendChild(cardTitle);
  cardBody.appendChild(span);
  cardBody.appendChild(h3);
  card.appendChild(cardBody);
  cardCol.appendChild(card);
  
  return cardCol;
}

function myfunction() {
  const managerSection = document.getElementById('ManagerSection');
  
  const row1 = document.createElement('div');
  row1.className = 'row';
  row1.appendChild(createCard('Pending Approvals', '~/Theme/assets/img/icons/unicons/chart-success.png'));
  row1.appendChild(createCard('Pending Approvals', '~/Theme/assets/img/icons/unicons/chart-success.png'));
  
  const col1 = document.createElement('div');
  col1.className = 'col-lg-4 col-md-4 order-1';
  col1.appendChild(row1);
  
  // 同理创建第二个col部分...
  
  managerSection.appendChild(col1);
}

额外注意：避免页面闪烁 #

确保JS代码在DOM加载完成后执行，可选择：

• 把<script>标签放在</body>标签之前
• 或者监听DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
  myfunction();
});

内容的提问来源于stack exchange，提问作者Dev Beginner