document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能问题

  • innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
  • 可以借助字符串或数组的方式进行替换，再设置给innerHTML
  • 优化后与document.createElement性能相近