在innerHTML中添加新行



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

我希望输出看起来像

var编号=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>

alert((函数不呈现HTML,通常认为alert()只呈现ASCII字符串,因此换行符通常使用n定义(rn也可以(

  • 因此,通常也使用t来格式化复杂的alert()对话框

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

eval()

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

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

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

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

ASCII/n对HTML呈现完全没有影响,因为它被归类为一个控件字符,该字符本身没有视觉表示。我们通常将这些字符称为空白字符。HTML呈现在呈现时忽略空白,这使我们能够始终在HTML代码中添加换行符,从而更容易读取代码,而不会使页面呈现不必要地膨胀。

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

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

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

  • 如何使用js-eval返回值
  • javascript将\n替换为

最新更新