SOURCE

console 命令行工具 X clear

                    
>
console
var xml = "<procedure><mainProcedure><proceduralStep><title>工艺流程</title><para><randomList><listItem><para></para></listItem></randomList></para></proceduralStep><proceduralStep><title>施工工艺要求</title><proceduralStep><title>标题</title><para>WQEQWE</para></proceduralStep><proceduralStep><title>标题</title><para>QWEQWEQW</para></proceduralStep><proceduralStep><title>标题</title><para>ASDASD</para><proceduralStep><title>标题</title><para>ASDSADAS</para></proceduralStep></proceduralStep></proceduralStep><proceduralStep><title>人员资格</title><para></para></proceduralStep></mainProcedure></procedure>"

xmlToHtml(xml);

function xmlToHtml(xml) {
  
    var dom = $($(xml).children()[0]).children()[1]
    paraToText(dom);
    //去除多余的proceduralstep,使结构可被样式解析
    proceduralstepToNull(dom);
    TitleToH3(dom);
    proceduralstepToDiv(dom);
    paraToDiv(dom);
    console.log(dom)
    $("#par-0002").html(dom)

}

function paraToText(dom) {
    var paras = $(dom).find("proceduralstep").siblings("para");
    if (paras.length != 0) {
        $(paras[0]).replaceWith(paras[0].innerHTML);
    }
    paras = $(dom).find("proceduralstep").siblings("para");
    if (paras.length != 0) {
        paraToText(dom);
    }
}

function proceduralstepToNull(dom) {
    var proceduralstep = $(dom).find("proceduralstep");
    for (var i = 0; i < proceduralstep.length; i++) {
        var parent = $(proceduralstep[i]).parent()[0];
        var children = $(parent).children("proceduralstep");
        if (proceduralstep[i] == children[0]) {
            continue;
        } else {
            var innerHTML = proceduralstep[i].innerHTML;
            var appends = $(proceduralstep[i].innerHTML);
            for (var j = 0; j < appends.length; j++) {
                children[0].append(appends[j]);
            }
        }
    }
    var proceduralstep = $(dom).find("proceduralstep");
    for (var i = 0; i < proceduralstep.length; i++) {
        var parent = $(proceduralstep[i]).parent()[0];
        var children = $(parent).children("proceduralstep");
        for (var j = 0; j < children.length; j++) {
            if (children.length > 1) {
                $(children[1]).remove();
            } else {
                break;
            }
        }

    }
}

function TitleToH3(dom) {
    var h3 = $(dom).find("title");
    if (h3.length != 0) {
        $(h3[0]).replaceWith("<h3 class=\"h3item\">" + h3[0].innerHTML + "</h3>");
    }
    h3 = $(dom).find("title");
    if (h3.length != 0) {
        TitleToH3(dom);
    }
}
function proceduralstepToDiv(dom) {
    var proceduralstep = $(dom).find("proceduralstep");
    if (proceduralstep.length > 0) {
        $(proceduralstep[0]).replaceWith("<div class=\"item\"><div class=\"reset\">" + proceduralstep[0].innerHTML + "</div></div>");
    }
    proceduralstep = $(dom).find("proceduralstep");
    if (proceduralstep.length > 0) {
        proceduralstepToDiv(dom);
    }
}
function paraToDiv(dom) {
    var para = $(dom).find("para");
    if (para.length > 0) {
        $(para[0]).replaceWith("<div class=\"item\">" + para[0].innerHTML + "</div>")
    }
}
<div class="reset">
	<h3 class="h3item">工艺流程</h3>
		<ul id="par-0001">
		<li></li>
		</ul>
	<h3 class="h3item">施工工艺要求</h3>
	<div class="item" id="par-0002"><br/></div>
	<h3 class="h3item">人员资格</h3>
	<div class="item" id="par-0003"><br/></div>
	</div>
.reset {
    line-height: 1.6;
    counter-reset: itemcounter;
    border: 1px dashed lightgray;
}

.item > .reset  {
    padding-left: 20px;
}



.h3item:before {
    content: counters(itemcounter,
    ".") ".";
    counter-increment: itemcounter;
}

本项目引用的自定义外部资源