在 innerHTML 中添加新行

Question

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

我希望输出看起来像

var number = 10;
alert(number);

我也试过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>

Answer 1

alert() function 不呈现 HTML，人们普遍认为 alert() 只呈现 ASCII 字符串，因此换行符多用 \n 定义（\r\n 也可以）

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

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

eval()另一方面：

eval
The eval() function evaluates JavaScript code represented as a string

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

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

<br/> 是将换行符插入 HTML 文本段落的正确机制。

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

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

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

<!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 帖子可能会有用

How can I use js eval to return a value?
javascript replace \n with

在 innerHTML 中添加新行

Adding a new line in innerHTML

javascript

newline

innerhtml