在innerHTML中添加新行

问题描述 投票:-2回答:1

你们能不能告诉我为什么我不能在'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>
javascript newline innerhtml
1个回答
0
投票

我尝试了br标签和n标签,但都没有成功......。alert()函数 并不能渲染HTML,一般认为 alert() 只渲染ASCII字符串,因此,行进的定义多用 \n (\r\n 也行)

  • 对于这个问题,常见的是将复杂的 alert() 对话框使用 \t 以及。

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

eval() 另一方面。

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

这个函数尝试编译和评估一个字符串值,就像它是一个 javascript 编码.

<br/> 不是javascript代码,这就是为什么你不能 eval 你的字符串已经 <br/> 中。

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

ASCII n对HTML的渲染完全没有影响,因为它被归类为一个新的字符。控制 角色本身没有视觉表现的角色。我们通常把这些字符称为 空白 characters.HTML渲染时忽略whitespace,这让我们可以一直在html代码中添加换行符,使代码更容易阅读,而不会不必要地膨胀页面渲染。

这个问题在 alert() 和html对字符串的渲染,如果你想一次性构建一个字符串,并在两个位置使用它,那么就必须知道。

因此,如果你想动态地构建javascript代码,并且该代码包含了一个警报框。AND 你想在该警报框中换行,那么只需使用 \n 那么如果你想显示构建的 编码 字符串,并在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员额可能有用

© www.soinside.com 2019 - 2024. All rights reserved.