为什么不直接用innerHTML（或者innerText）修改div里面的内容，而要构建这要两个函数呢？

Question

<h2 class="info-title" id="info-title"></h2>
<h3 class="info-date" id="info-date"></h3>
<p class="info-text" id="info-text"></p>
var response = request.responseText;
var splitResponse = response.split('|');
var title = splitResponse[1];
var date = splitResponse[2];
var description = splitResponse[3];var titleElement = document.getElementById("info-title");
var dateElement = document.getElementById("info-date");
var descriptionElement = document.getElementById("info-text");replaceText(titleElement, title);
replaceText(dateElement, date);
replaceText(descriptionElement, description);function replaceText(el, text) {  //为什么构建了这样两个函数来修改div里的内容呢？
 if (el != null) {
  clearText(el);
  var newNode = document.createTextNode(text);
  el.appendChild(newNode);
 }
}function clearText(el) {
 if (el != null) {
  if (el.childNodes) {
   for (var i=0; i<el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
   }
  }
 }
}

Answer 1

你试着用innerHTML或者innerText实现他的功能。或许它函数不单单是innerHTML功能。

Answer 2

innerHTML是一次性动态塞入编列添加子节点appendChild(newNode)可避免整体的修改

Answer 3

这两个函数和innerHTML的作用是完全不同的.
innerHTML是将html格式的字符串写入到当前页面中,并同时解释生成dom元素
而自定义方法replaceText是将传入的字符串用文本的方式输出到网页上,使用了createTextNode方法,所以即使传入的文本是html格式也不会被解释并生成dom元素.

Answer 4

区别：createTextNode会将文本进行实体转换，如果文本中含有html标签，原样显示。试试 var title = "<b>title</b>";

Answer 5

如果是采用 innerHTML（或者innerText），那么有没有必要 先将里面的内容 removeChild 掉。