在 innerHTML 中添加新行答案

【问题标题】：Adding a new line in innerHTML在 innerHTML 中添加新行
【发布时间】：2020-05-08 08:32:27
【问题描述】：

你们能告诉我为什么我不能在'p'标签中换行吗？

我希望输出看起来像

变量编号 = 10;
警报（数字）；

我也尝试过 br 标签和 \n 标签，但并没有真正奏效。

我不知道这里出了什么问题..

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>onclick</title>

    <script type="text/javascript">
        function myNum() {

            var willEval = " ";
            //willEval += 'var number = 10; <br/>';
            //I put <br/> before, but error happened saying
            //Uncaught SyntaxError: Unexpected token '<'

            willEval += 'var number = 10;';
            willEval += '\n'; 
            //or willEval += '<br />;

            willEval += '\n alert(number);';

            eval(willEval);
            alert(willEval);

            document.getElementById('demo').innerHTML = willEval + "<br />";

        }

    </script>
</head>


<body>
    <h1>onclick</h1>

    <button onclick="myNum()">
        CLICK ME!
    </button>
    <p id="demo"></p>
</body>
</html>

【问题讨论】：

您需要在普通 HTML 上下文中使用 br，换行符仅在某些条件下显示（在 pre 元素内，或使用特殊的 CSS格式已应用。）您的错误是您在整个文本内容之前添加了br，而不是在您当前仅放置的两个部分中间插入它\n.
那我应该做前置元素把整个东西放进去吗？
... 或插入   而不是 \n - 取决于您的具体需要，如果您需要在页面内将其显示为警报和，如果您使用   作为 HTML 部分，则需要以不同方式处理两者。
您应该更多地解释代码，很高兴看到您的想法和尝试，但不清楚的是您希望实现的总体结果。下次将其分解为警报框显示的内容与您预期的内容，然后对 html 执行相同的操作。我无法为您进行此编辑，因为我必须做出太多假设。

标签： javascript newline innerhtml

【解决方案1】：

alert() function 不呈现 HTML，普遍认为alert() 只呈现 ASCII 字符串，因此换行符在很大程度上可以用 \n 定义（\r\n 也可以）

就此而言，通常也使用\t 格式化复杂的alert() 对话框。

alert() 直接传递给浏览器，所以有些浏览器会支持 unicode 或扩展的 ASCII 字符集。这样想，警告框实际上是来自浏览器代码的弹出对话框，而不是来自您的页面。由于这个原因，内容m，必须符合编写浏览器代码的字符串编码。

另一方面，eval()：

eval
eval() 函数评估表示为字符串的 JavaScript 代码

此函数尝试编译和评估字符串值，就好像它是 javascript code。

  不是 javascript 代码，这就是为什么你不能 eval 包含   的字符串。

  是在 HTML 文本段落中插入换行符的正确机制。

ASCII /n 对 HTML 渲染完全没有影响，因为它被归类为 control 字符，没有字符本身的视觉表示。我们通常将这些字符称为空格字符。 HTML 渲染在渲染时会忽略空格，这允许我们一直在 html 代码中添加换行符，以便更容易阅读代码，而不会不必要地使页面渲染膨胀。

alert() 和字符串的 html 呈现之间的这个问题对于了解您是否想构建一次字符串并在两个位置使用它很重要。

因此，如果您想动态构建 javascript 代码，并且该代码包含一个警告框 AND 您想在该警告框中换行，那么只需使用 \n 然后如果您想在 html 中显示构造的 code 字符串并在 html 输出中保留换行符，您可以使用 replace() 将所有 \n 字符转换为  ：

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>onclick</title>

    <script type="text/javascript">
        function myNum() {
 
            var result = 0;
            var willEval = " ";
            willEval += 'var number = 10;';
            willEval += '\n'; 
            willEval += '\n alert(number);';
            // NOTE: added return statement so we can use the result of the eval
            willEval += '\n return number;';

            var result = eval('(function(){' + willEval + '})()');

            willEval += '\n =' + result;
            alert(willEval);

            document.getElementById('demo').innerHTML = willEval.replace(/\n/g,'<br />');

        }

    </script>
</head>


<body>
    <h1>onclick</h1>

    <button onclick="myNum()">
        CLICK ME!
    </button>
    <p id="demo"></p>
</body>
</html>

这些 SO 帖子可能有用

【讨论】：

感谢您的帮助！我会参考你提供的那些网站 :) 是的，下次我问的时候应该让我的问题和代码更清楚。再次感谢！