如何将普通字符串转化为dom节点插入页面

最新推荐文章于 2024-08-04 03:29:37 发布

Steven--Lee

最新推荐文章于 2024-08-04 03:29:37 发布

阅读量7k

点赞数

分类专栏： javascript 文章标签： dom parseFromString parser 节点插入

本文链接：https://blog.csdn.net/momDIY/article/details/79535082

版权

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

主要转化原理

将存储在存储在字符串中的XML或HTML解析为一个DOM文档，然后使用parseFromString方法将这个DOM文档转化为一个DOM对象。选择到要插入的节点后使用append方法插入到对应的位置即可。

有点懵？没关系，继续往下看。

主要操作

创建DOMParser()文档
使用parseFromString()方法将DOMParser()文档转化为DOM对象
选择DOM对象中需要的节点对象
将节点对象插入html页面

代码示例

使用parseFromString()方法

let str='<h1>Interesting</h1>';
let parser = new DOMParser();
let doc = parser.parseFromString(str, "text/xml");
let node = doc.getElementsByTagName('h1')[0];

$('#test')[0].append(node);

坑点注意

1. parseFromString转化结果

parseFromString转化的结果是一个document对象，无法直接进行插入操作，需提取内部节点后再插入。

2. 数据插入表格

在往table标签中插入数据时必须使用<table></table>标签包裹，否则插入的节点中parseFromString方法会将其中的tr标签和td标签自动删除。

let item=`<table>
    <tr>
        <td><input type="checkbox" class="input-chk">&nbsp;&nbsp;&nbsp;&nbsp;${i}</td>
        <td>${v.userId}</td>
        <td>${v.role.roleName}</td>
        <td>${v.userName}</td>
        <td>${v.mobile}</td>
        <td>${v.email}</td>
        <td>${v.role.stat}</td>
        <td><span class="dropdown"><button type="button" data-toggle="dropdown" aria-haspopup="true"
                                           aria-expanded="true"
                                           class="btn btn-warning dropdown-toggle dropdown-menu-right"><i
                class="ft-settings"></i></button><span aria-labelledby="btnSearchDrop1"
                                                       class="dropdown-menu mt-1 dropdown-menu-right high-index"><a
                href="#" class="dropdown-item"><i class="la la-eye"></i>修改</a><a href="#" class="dropdown-item"><i
                class="la la-pencil"></i> 删除</a><a href="#" class="dropdown-item"><i class="ft-upload"></i> 冻结</a><a
                href="#" class="dropdown-item"><i class="la la-trash"></i> 解冻</a><a href="#" class="dropdown-item"><i
                class="la la-refresh"></i> 重置密码</a></span></span></td>
    </tr>
</table>`;

_$('userItemWrap').append((new DOMParser()).parseFromString(item, "text/html").getElementsByTagName('tr')[0]);