如何在可编辑DIV中输出原始HTML代码，避免标签被自动移除

问题原因 #

你直接通过innerHTML给可编辑DIV赋值时，字符串中的HTML实体（<、"等）会被浏览器解析为真实的HTML符号，你代码字符串里的<div class="flexContainerClass">会被识别为实际的DOM元素，而非要展示的文本内容，最终渲染时就只保留了元素内部的HELLO WORLD文本。

解决方案 #

方案1：使用textContent/innerText赋值（最简便）

这两个属性会直接把内容当做纯文本处理，不会解析HTML标签，也不需要提前手动转义特殊字符，直接赋值即可：

document.getElementById(myEditableDIVInputArea_Id).textContent = `
var myRawInnerHTMLVal = async (revVarArgs) => {
    let myWidgetView = '<div class="flexContainerClass">HELLO WORLD</div>';

    return myWidgetView;
};

module.exports.myRawInnerHTMLVal = myRawInnerHTMLVal;
`;

方案2：特殊字符二次转义（必须用innerHTML时使用）

如果场景要求必须使用innerHTML赋值，需要先对要展示的代码内容做特殊字符二次转义，避免被浏览器解析为DOM元素：
首先封装转义工具函数：

function escapeRawCode(str) {
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
}

调用时先转义再赋值：

const rawCode = `
var myRawInnerHTMLVal = async (revVarArgs) => {
    let myWidgetView = '<div class="flexContainerClass">HELLO WORLD</div>';

    return myWidgetView;
};

module.exports.myRawInnerHTMLVal = myRawInnerHTMLVal;
`;
document.getElementById(myEditableDIVInputArea_Id).innerHTML = escapeRawCode(rawCode);

方案3：保留代码格式的展示方案

如果需要保留代码的缩进、换行格式，可配合pre+code标签使用：

const codeContainer = document.getElementById(myEditableDIVInputArea_Id);
// 清空原有内容
codeContainer.innerHTML = '';

const preEl = document.createElement('pre');
const codeEl = document.createElement('code');
// 直接用textContent赋值代码内容
codeEl.textContent = `
var myRawInnerHTMLVal = async (revVarArgs) => {
    let myWidgetView = '<div class="flexContainerClass">HELLO WORLD</div>';

    return myWidgetView;
};

module.exports.myRawInnerHTMLVal = myRawInnerHTMLVal;
`;

preEl.appendChild(codeEl);
codeContainer.appendChild(preEl);

内容的提问来源于stack exchange，提问作者Program-Me-Rev