dom元素转化成字符串；字符串html 转换成实际代码html; innerHTML, outerHTML,

最新推荐文章于 2024-05-01 23:24:22 发布

柠檬花开_

最新推荐文章于 2024-05-01 23:24:22 发布

阅读量8.4k

点赞数 3

分类专栏： dom元素转换成string html 字符串string html转换成代码 html

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/105954586

版权

dom元素转换成string html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

字符串string html转换成代码 html

1 篇文章 0 订阅

订阅专栏

1、字符串转换成代码

//字符串转换成代码
let stringHtml = '<!DOCTYPE html><html lang="zh-CN">
<head>
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="author" content="WebpowerChina">
    <link rel="WebpowerChina" href="mailto:market@webpowerchina.com">
</head>
<body>
    <div>
     <input type="text" value="hellow">
</div>
</body>
</html>'
// StringHTMl to html
let codeHtml = new DOMParser().parseFromString(stringHtml, 'text/html');
console.info(codeHtml);

打印结果如图：

2、dom元素转化成字符串

let dom = document.getElementsByClassName('activeBlock')[0];
// 选中的区域块 input dom元素转化成字符串
let inputHtml = dom.querySelector('input').outerHTML;

3、innerHTML与outerHTML的区别

<template>
    <div style="">
        <div>
            <p>你好</p>
            <div id="html">
                <h3>hellow world</h3>
            </div>
            
        </div>
    </div>
</template>
export default {
    mounted(){
        let inHtml = document.getElementById('html').innerHTML;
        let outHtml = document.getElementById('html').outerHTML;
        console.info(inHtml, typeof inHtml, 'inHtml');
        //<h3>hellow world</h3> string inHtml

        console.info(outHtml, typeof outHtml, 'outHtml');
        //<div id="html"><h3>hellow world</h3></div> string outHtml
    }
}

如图：

柠檬花开_

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
dom元素转化成字符串；字符串html 转换成实际代码html; innerHTML, outerHTML,

/ 选中的区域块 input dom元素转化成字符串let inputHtml = dom.querySelector('input').outerHTML;// StringHTMl to htmllet contentHtml = new DOMParser().parseFromString(this.material.materialContent, 'text/html');...
复制链接

扫一扫