javascript - 在 innerHTML 中添加新行

问题描述

你们能告诉我为什么我不能在'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>

标签： javascriptnewlineinnerhtml

alert() 函数不渲染 HTML，通常只alert()渲染 ASCII 字符串，因此换行符可以用\n(\r\n也可以)

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

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

eval()另一方面：

eval
eval() 函数计算表示为字符串的 JavaScript 代码

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

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

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

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

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

因此，如果您想动态构建 javascript 代码，并且该代码包含一个警告框并且您希望在该警告框中有一个换行符，\n那么如果您想在 html 中显示该构建的代码字符串并保留换行符，只需使用 then您可以将所有\n字符转换为<br/>使用的 html 输出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 帖子可能有用

javascript - 在 innerHTML 中添加新行

问题描述

解决方案

推荐阅读