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

本文主要是介绍dom元素转化成字符串；字符串html 转换成实际代码html; innerHTML, outerHTML,，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 inHtmlconsole.info(outHtml, typeof outHtml, 'outHtml');//<div id="html"><h3>hellow world</h3></div> string outHtml}
}

如图：