Javascript：AppendChild追加两次而不是一次

Question

这是我的代码：

this.renderHtml = function () {
    var html = '';
    var domElementId = this.jqElementId;
    html += '<div id = "'+domElementId+'" class="widget-content widget-wrapper" style="background-color:#eee; height: 100px; width: 400px">'+
                '<div class="container">'+
                    '<div class="rulerContainer"></div>'+
                    '<div class="progressBarContainer" style="background-color:#ccffdd; height: 15px"></div>'+
                    '<div class="displayValue" style="background-color: #e6ffff; height: 15px color: red"></div>'+
                '</div>'+
            '</div>';
    return html;
}; 

this.afterRender = function () {
    this.widgetLogic(this.properties.Value);
};

this.updateProperty = function (updatePropertyInfo) {
    if (updatePropertyInfo.TargetProperty === 'Value') {
        this.setProperty('Value', updatePropertyInfo.SinglePropertyValue);
        this.widgetLogic(updatePropertyInfo.SinglePropertyValue);
    }
};

this.widgetLogic = function(rawValue) {
    var value = (rawValue === undefined ? 0 : parseInt(rawValue));
    var name = this.jqElementId;
    var list = document.getElementsByClassName("displayValue")[0].innerHTML = value;
    var rulerContainer = document.createElement('div');
    rulerContainer.className = "marker";
    document.getElementsByClassName("rulerContainer")[0].appendChild(rulerContainer);
    $('.marker').css('width','20px');
    $('.marker').css('height','50px');
    $('.marker').css('border-right','1px solid green');
};

根据这段代码，我应该在rulercontainer类中看到一条绿色的垂直线。 我的结果是看到两条行而不是一行，我不明白为什么