HTML字符转DOM方法

GMF_CodingBoy

已于 2022-09-23 19:08:48 修改

阅读量1k

点赞数

文章标签： html safari javascript

于 2022-09-23 19:06:06 首次发布

本文链接：https://blog.csdn.net/qq_41199852/article/details/127016535

版权

前言

html字符串转dom的场景一般很少，也不推荐做这种危险操作，容易被XSS攻击，如果有需要按需使用

具体方式

方法	示例	安全性	任意节点	兼容性
innerHTML	let html = '文本元素'; let placeholder = document.createElement('div'); placeholder.innerHTML = html; let nodes = placeholder.childNodes;	script 脚本不会执行	不合法的节点无法转换，如p标签内使用div标签使用template元素可绕过此限制	IE6+
insertAdjacentHTML	let html = '元素'; let placeholder = document.createElement('div'); placeholder.insertAdjacentHTML('afterbegin', html); // 如果HTML是单个闭合HTML标签 //

方法

示例

安全性

任意节点

兼容性

innerHTML

let html = '文本元素';
let placeholder = document.createElement('div');
placeholder.innerHTML = html;
let nodes = placeholder.childNodes;

script 脚本不会执行

不合法的节点无法转换，如p标签内使用div标签 使用template元素可绕过此限制

IE6+

insertAdjacentHTML

let html = '元素';
let placeholder = document.createElement('div');
placeholder.insertAdjacentHTML('afterbegin', html);
// 如果HTML是单个闭合HTML标签
//

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GMF_CodingBoy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML字符转DOM方法

html字符串转dom的场景一般很少，也不推荐做这种危险操作，容易被XSS攻击，如果有需要按需使用。
复制链接

扫一扫

html字符串转换html dom对象

晨曦的博客

08-21

1546

【代码】html字符串转换html dom对象。

如何将 HTML 字符串转换成 DOM 对象：用 DOMParser

学习笔记

06-02

2120

有的时候我们需要处理一些 HTML 字符串，比如我需要从下方 HTML 字符串中提取每个标签的内容和属性。

参与评论您还未登录，请先登录后发表或查看评论

用DOMParser 把字符串格式的HTML转换成DOM对象

byebukesi的博客

07-17

274

【代码】用DOMParser 把字符串格式的HTML转换成DOM对象。

如何将HTML字符转换为DOM节点并动态添加到文档中

玄魂工作室

08-18

1294

将HTML字符转换为DOM节点并动态添加到文档中将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。字符串转换为DOM节点本身并不难，本篇文章主要涉及两个...

将带html语义标签的字符串转成dom添加到html中显示

最新发布

qq_51389137的博客

01-03

481

1.先把字符串转成html格式，然后在父节点appendchild。2.父节点直接innerHtml赋值字符串。

javascript转换字符串为dom对象（字符串动态创建dom）

10-29

此外，文中还提到了一个名为`b$`的JavaScript框架，其中集成了`parseDom`方法，可以直接使用`b$.parseDom`来转换HTML字符串为DOM对象。这是一个开源的框架，可以简化DOM操作，提高开发效率。总结来说，通过`...

JavaScript实现字符串与HTML格式相互转换

10-15

1. **字符串转HTML** 当我们需要将字符串中的特殊字符转换为它们的HTML实体以避免在网页上被解析为HTML元素时，可以使用`encodeHtml`函数。这个函数的工作原理是遍历字符串中的每个字符，获取其Unicode编码，并将...

Vue解析带html标签的字符串为dom的实例

12-30

2.解决方法 v-html <div class=blog-content v-html=curblog.content> v-html可以操作元素中的HTML标签，效果类似于jquery里的 .html()方法，在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现...

如何将HTML字符转换为DOM节点并动态添加到文档中详解

01-19

1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试本文的示例：有如下代码段 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF...

react 显示html5,让 React 正常显示你的 html 代码： dangerouslySetInnerHTML

weixin_39623671的博客

06-17

1132

做项目需要把服务器接口传过来的 HTML 文本字符串转换成 DOM 对象。有两种方法：第一种用 innerHTML；function parseToDOM(str){var div = document.createElement("div");if(typeof str == "string")div.innerHTML = str;return div.childNodes;}123456fu...

手工HTML代码转换为DOM代码

06-17

手工HTML代码转换为DOM代码,这个小例子是我在学习JavaScript DOM过程中遇到的小例子，感觉非常好，拿来分享给大家。

JQuery插件第二十三个:仿照DOM对象的outerHTML

chinet_bridge的专栏

02-12

786

JQuery插件第二十三个:仿照DOM对象的outerHTML (function ($) { $.fn.outerHTML = function(){ var str=""; var id="outerHTML"+new Date().getTime(); var outer=$("#"+id);

vue虚拟DOM模拟实现

m0_54089303的博客

12-09

789

虚拟DOM

将字符串模板转为dom节点

weixin_55666792的博客

04-27

505

字符串模板转为dom节点

字符串转dom

qq_41438582的博客

08-19

761

Jquery var dom=$("<P>转Dom</p>") js原生 var dom=parseDom("<P>转Dom</p>") console.log(dom) function parseDom(arg) { 　　 var objE = document.createElement("div"); 　　 objE.innerHTML = arg; 　　 return objE.childNodes; }; ...

javascript 原生类 DOMParser 把 字符串格式的HTML文档源码转换成 document DOM对象

wuyujin1997的博客

10-31

4416

# Intro有一天我在写爬虫。其实也说不上是爬虫，就是打开浏览器上网，觉得页面有些数据挺有意思，就打开开发者工具，在 Network/Console 中通过 javascript 原生的 fetch 方法批量、自动地请求一些web资源。其中有一个关节，是以下的需求：有一些字符串格式的HTML源码，需要将其转换为 document 对象(DOM对象)，这样我就可以在 console 直接使用选择器(selector)对该HTML文档的文本内容进行过滤清洗处理。

将html代码转换为dom,将HTML字符转换为DOM节点并动态添加到文档中

weixin_29576901的博客

05-31

1803

将HTML字符转换为DOM节点并动态添加到文档中将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题：1 字符串转换为HTML DOM节点的基本方法及性能测试2 动态生成的DOM节点添加到文档中的方法及性能测试本文的示例：有如下代码段Document复制代码任务是编写一个JavaScript函数，接收一个文...

html 转dom,虚拟DOM转真实DOM.html

weixin_35794316的博客

06-23

359

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">Diff算法/*** 创建元素* @param type 类型* @param props 参数* @param children 子节点 = 数组 || 文字*/class Eleme...

javascript中html字符串转化为jquery dom对象的方法

极客神殿

07-10

2736

js dom 转成html

05-28

要将 JavaScript 中的 DOM 对象转换为 HTML 字符串，可以使用 DOM API 中的 innerHTML 属性。例如，如果有一个 div 元素，可以使用以下代码将其转换为 HTML 字符串： ```javascript var divElement = document.createElement("div"); divElement.innerHTML = "这是一个 div 元素"; var htmlString = divElement.outerHTML; console.log(htmlString); // 输出：<div>这是一个 div 元素</div> ``` 其中，innerHTML 属性可以获取或设置元素内部的 HTML 内容，而 outerHTML 属性可以获取或设置元素及其内部的 HTML 内容。使用 outerHTML 属性可以将整个元素及其内容转换为 HTML 字符串。