javascript动态插入html元素

最新推荐文章于 2024-07-31 11:05:25 发布

转载最新推荐文章于 2024-07-31 11:05:25 发布 · 6.9k 阅读

grammar 同时被 2 个专栏收录

58 篇文章

订阅专栏

javaScript

46 篇文章

订阅专栏

本文介绍两种使用JavaScript动态插入HTML元素的方法：一是通过DOM操作创建并插入元素，包括设置属性、样式及文本内容；二是利用HTML模板字符串直接构建并追加到指定容器。

转载：javascript动态插入html元素

主要有是两种方案：

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);