Javascript ES6-模板字符串被包装为单个，不显示在第二行中_Javascript_Ecmascript 6

Javascript ES6-模板字符串被包装为单个，不显示在第二行中

javascript ecmascript-6

Javascript ES6-模板字符串被包装为单个，不显示在第二行中,javascript,ecmascript-6,Javascript,Ecmascript 6,下面的代码将HTML内容包装起来，但不是以指定的HTML格式试图在ContentEdable div中显示如下所述格式的HTML内容 HTML: JS: 让htmlText=` \n 预览 //风格 html{高度：100%} 身体{ 保证金：0；身高：100%； } ` document.getElementById（'htmltext'）。textContent=htmltext；尝试以以下格式实现输出 <!DOCTYPE html>\n <title>Pr

下面的代码将HTML内容包装起来，但不是以指定的HTML格式

试图在ContentEdable div中显示如下所述格式的HTML内容

HTML:

JS:

让htmlText=`
\n
预览
//风格
html{高度：100%}
身体{
保证金：0；
身高：100%；
}
`
document.getElementById（'htmltext'）。textContent=htmltext；

尝试以以下格式实现输出

<!DOCTYPE html>\n
 <title>Preview</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
   <meta name="mobile-web-app-capable" content="yes">
   <script src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
  // style
   <style>
     html { height: 100% }
     body {
       margin: 0;
       height: 100%;
      }
   </style>
   <body></body>

\n
预览
//风格
html{高度：100%}
身体{
保证金：0；
身高：100%；
}

您肯定已经知道，HTML忽略换行符。如果要显示

pre

格式，则必须使用

pre

：

 <pre contenteditable="true" id="htmltext"></pre>

或者转义字符串，将换行符替换为

，并设置

#htmltext

的

innerHTML

属性。我不清楚您的问题是什么？我正在尝试将htmltext内容添加到contenteditable div中，并将其添加到一行中，而不是多行中，格式如前面所述（HTML代码）inside div在上一次被注释时，您在HTML中将

contenteditable

拼写为

contenteditable

。

 let htmltxt =`
 <!DOCTYPE html>\n
 <title>Preview</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
   <meta name="mobile-web-app-capable" content="yes">
   <script src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
  // style
   <style>
     html { height: 100% }
     body {
       margin: 0;
       height: 100%;
      }
   </style>
   <body></body>`


    document.getElementById('htmltext').textContent  = htmltxt;

<!DOCTYPE html>\n
 <title>Preview</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
   <meta name="mobile-web-app-capable" content="yes">
   <script src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
  // style
   <style>
     html { height: 100% }
     body {
       margin: 0;
       height: 100%;
      }
   </style>
   <body></body>

 <pre contenteditable="true" id="htmltext"></pre>