我正在使用以下代码将包含内容的新脚本插入HTML文件， 目前以下代码正在工作，新脚本是在第一个现有脚本之后插入的，问题是内容不是缩进
e.g。这是新添加的脚本的输出（正如您可以在一行中看到的那样）
<script> var keyOfFilesArray = Object.keys(data)[0]; var filesArray = data[keyOfFilesArray]; </script>
我想将其更改为缩进，如下所示：
<script> var keyOfFilesArray = Object.keys(data)[0]; var filesArray = data[keyOfFilesArray]; </script>
我怎么能这样做？我相信我需要添加/ n但不确定插入它的最佳方式在哪里...
https://jsfiddle.net/k32ntkr8/
这是JS代码
btn.onclick = function(e){
debugger;
var innerhtml = [
' var keyOfFilesArray = Object.keys(data)[0];',
' var filesArray = data[keyOfFilesArray]; '
].join('');
var html = process(input.defaultValue,innerhtml);
output.value = html;
}
function process(html,innerhtml) {
var escapedHTML = html
.replace(/body/g, 'body$')
.replace(/head/g, 'head$');
sandbox.innerHTML = escapedHTML;
var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0];
var newScript = document.createElement('script');
newScript.innerText = innerhtml;
script.parentNode.insertBefore(newScript, script.nextSibling);
var unescapedHTML = sandbox.innerHTML
.replace(/body\$/g, 'body')
.replace(/head\$/g, 'head')
.replace(/"/g, "'");
return (
'<!DOCTYPE HTML>\n<html>' +
unescapedHTML +
'</html>'
);
};
怎么做？请建议，下面的答案没有多大帮助...... 如果我能以某种方式改善这个问题，请告诉我。
答案 0 :(得分：0)
好的，如果您将onclick处理程序更改为此
btn.onclick = function(e){
debugger;
var innerhtml = [
'',
' <script>',
' var keyOfFilesArray = Object.keys(data)[0];',
' var filesArray = data[keyOfFilesArray]; ',
' <\/script>'
].join('\n');
var html = process(input.defaultValue,innerhtml);
output.value = html;
}
并将填充脚本的process行更改为此
var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0];
script.parentNode.insertAdjacentHTML('afterBegin', innerhtml);
你应该得到这个输出
<head>
<script>
var keyOfFilesArray = Object.keys(data)[0];
var filesArray = data[keyOfFilesArray];
</script>
...
</head>
答案 1 :(得分：0)
这样的东西？
var innerhtml = [
'\tvar keyOfFilesArray = Object.keys(data)[0];',
'\tvar filesArray = data[keyOfFilesArray];'
].join("\n");
var script_code = '<script>\n' + innerhtml + '\n<\/script>';
然后只需将script_code变量插入到页面上的任何位置即可。