js改dom内容

1.js修改div标签中的内容

<div id='divId'>初始文字</div>
<script>
    $(document).ready(function(e){
        $('#divId').html('新的内容文字');
    })
</script>  

2.js向div追加内容

/* 执行日子回显 */
   var returnLogs = function () {
	   for(var i=0;i<5;i++){
		   /* $("#step_log").append("<p>哈哈哈哈哈哈哈</p><br/>"); */
		   var testdiv = document.getElementById("step_log");
		   testdiv.innerHTML = testdiv.innerHTML+"<p>哈哈哈哈哈哈哈</p><br/>";
	   }
   };

3.滚动条跟随内容，延迟逐一加载Log效果

<script>
  	var returnlogs = [];
	returnlogs.push("流程开始执行");
	returnlogs.push("正在执行关系型数据库输入节点");
	returnlogs.push("关系型数据库输入节点运行结束");
	returnlogs.push("正在执行数据筛选过滤节点");
	returnlogs.push("数据筛选过滤节点运行结束");
	returnlogs.push("正在调用算法分析数据");
	returnlogs.push("数据分析结束");
	returnlogs.push("正在执行关系数据库数据输出节点");
	returnlogs.push("关系数据库数据输出节点运行结束");
	returnlogs.push("正在输出数据");
	returnlogs.push("输出数据成功，请到【管理】模块点击【结果】按钮,查看可视化数据。");
	/* 执行日子回显 */
   var step=0;
   var returnLogs = function () {
	    $("#step_log").html("");
	    /* var returnlogsdiv = document.getElementById("step_log");
	    var t = setTimeout(function(step){
	    	debugger
	    	$("#step_log").append("<h2 class='x-b-ht'>"+(step+1)+"."+returnlogs[step]+"</h2><br/>");
	    	if(step==returnlogs.length-1){
	    		clearTimeout(t);
	    	}else{
	    		step++;
	    	}
    	},1000); */
    	
    	setTimeout(function () {
    	  for(var i=0;i<returnlogs.length;i++){
    		  var returnlogsdiv = document.getElementById("step_log");
  	    	/* setTimeout(function(i){ */
  			returnlogsdiv.innerHTML = returnlogsdiv.innerHTML+"<spon class='x-b-ht' style='margin-top: 0px;'>"+(i+1)+"."+returnlogs[i]+"</h2><br/>";
  	    	/* },1000) */
  	    	var dom = $(document.getElementById("step_log"));
  	    	var hdom  = $(document.getElementsByClassName("x-b-ht")[0]);
  	    	var scrollTop =  hdom.offset().top + dom.scrollTop();
  	    	dom.animate({
  	    	      scrollTop: scrollTop
  	    	    });
    	  }
    	},3000)
   };
   /* 执行日子回显 */

<script>
  	var returnlogs = [];
	returnlogs.push("流程开始执行");
	returnlogs.push("正在执行关系型数据库输入节点");
	returnlogs.push("关系型数据库输入节点运行结束");
	returnlogs.push("正在执行数据筛选过滤节点");
	returnlogs.push("数据筛选过滤节点运行结束");
	returnlogs.push("正在调用算法分析数据");
	returnlogs.push("数据分析结束");
	returnlogs.push("正在执行关系数据库数据输出节点");
	returnlogs.push("关系数据库数据输出节点运行结束");
	returnlogs.push("正在输出数据");
	returnlogs.push("输出数据成功，请到【管理】模块点击【结果】按钮,查看可视化数据。");
	/* 执行日子回显 */
   var step=0;
   var returnLogs = function () {
	    $("#step_log").html("");
	    /* var returnlogsdiv = document.getElementById("step_log");
	    var t = setTimeout(function(step){
	    	debugger
	    	$("#step_log").append("<h2 class='x-b-ht'>"+(step+1)+"."+returnlogs[step]+"</h2><br/>");
	    	if(step==returnlogs.length-1){
	    		clearTimeout(t);
	    	}else{
	    		step++;
	    	}
    	},1000); */
    	
    	setTimeout(function () {
    	  for(var i=0;i<returnlogs.length;i++){
    		  var returnlogsdiv = document.getElementById("step_log");
  	    	/* setTimeout(function(i){ */
  			returnlogsdiv.innerHTML = returnlogsdiv.innerHTML+"<spon class='x-b-ht' style='margin-top: 0px;'>"+(i+1)+"."+returnlogs[i]+"</h2><br/>";
  	    	/* },1000) */
  	    	var dom = $(document.getElementById("step_log"));
  	    	var hdom  = $(document.getElementsByClassName("x-b-ht")[0]);
  	    	var scrollTop =  hdom.offset().top + dom.scrollTop();
  	    	dom.animate({
  	    	      scrollTop: scrollTop
  	    	    });
    	  }
    	},3000)
   };
   /* 执行日子回显 */
</script>

注意：本文归作者所有，未经作者允许，不得转载