如何用JavaScript实现简单数学运算并将结果输出到网页任意div中？

首先，document.write()会直接写入文档流，仅适合页面加载初期的简单场景。要将结果输出到指定div，核心思路是先定位到目标div元素，再修改它的内容。

步骤1：给目标div添加唯一标识 #

先在HTML中给你要输出结果的div加个标识（最常用的是id）：

<div id="result-container"></div>

步骤2：修改JavaScript代码 #

替换原来的document.write部分，以下是几种实用方法：

方法1：用getElementById + textContent（推荐，安全不解析HTML）

var numOne = 25
  , numTwo = 14
  , res
  ; 
res = numOne - numTwo; 
// 获取目标div
var targetDiv = document.getElementById('result-container');
// 设置文本内容
targetDiv.textContent = res;

方法2：用getElementById + innerHTML（需输出HTML内容时用）

如果需要给结果加样式或其他HTML标签，可使用这种方式：

var numOne = 25
  , numTwo = 14
  , res
  ; 
res = numOne - numTwo; 
document.getElementById('result-container').innerHTML = `<span style="color:blue;">计算结果：${res}</span>`;

方法3：用querySelector（支持类名等灵活选择器）

如果你的div是用类名标识的（比如<div class="result-box"></div>），可以这样写：

var numOne = 25
  , numTwo = 14
  , res
  ; 
res = numOne - numTwo; 
document.querySelector('.result-box').textContent = res;

关键注意事项 #

要确保JS代码在div元素加载完成后执行，避免出现“Cannot set property 'textContent' of null”的错误：

• 要么把脚本放在</body>标签的前面；
• 要么用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  var numOne = 25
    , numTwo = 14
    , res
    ; 
  res = numOne - numTwo; 
  document.getElementById('result-container').textContent = res;
});

内容的提问来源于stack exchange，提问作者the mtv