# javascript如何动态插入html元素呢？

> 来源：梦飞idc云平台 | 原文：https://www.mfisp.com/11010.html | 发布：2022-10-11 | 更新：2022-10-11 | 分类：投稿分享

## 主要有是两种方案：

  

## 1.使用DOM

 

//使用createElement创建元素  
 var dialog = document.createElement('div');  
 var img = document.createElement('img');  
 var btn = document.createElement('input');  
 var content = document.createElement('span');  
 // 添加class  
 dialog.className = 'dialog';  
 // 属性  
 img.src = 'close.gif';  
 // 样式  
 btn.style.paddingRight = '10px';  
 // 文本  
 span.innerHTML = '您真的要GG吗？';  
 // 在容器元素中放入其他元素  
 dialog.appendChild(img);  
 dialog.appendChild(btn);  
 dialog.appendChild(span);  
 ```  
## 2.使用html template  
``` javascript  
var popContent =[  
 '<li class="monitory-point-li" indexcode="00000000001310013631">',  
 '<span class="checkbox-unchecked"></span>',  
 '<span class="monitory-text" title="'+name+'">'+formedName+'</span>',  
 '</li>'  
 ].join(' ');  
$('.document').append(popContent);  
   
<div class="se-preview-section-delimiter"></div>

 

或者使用这种写法

 

var popContent =  
 '<li class="monitory-point-li" indexcode="00000000001310013631">'+  
 '<span class="checkbox-unchecked"></span>'+  
 '<span class="monitory-text" title="'+name+'">'+formedName+'</span>'+  
 '</li>';  
$('.document').append(popContent);

 

![javascript如何动态插入html元素呢？](https://www.mfisp.com/wp-content/uploads/2021/12/13281957246015c_1_post.jpg)

---
本页由 梦飞idc云平台（https://www.mfisp.com）提供。站点导航见 https://www.mfisp.com/llms.txt