创建标记框

Question

我正在创建一个类似于StackOverflow的标记框。我发现这个问题已经在这里提出（How to make a "tags box" using jQuery (with text input field + tags separated by comma)），但是我对Javascript有个疑问。

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div class='tag-container' id = "tag-container"> 
     <span class='dashfolio-tag'>Tag1</span> 
     <span class='dashfolio-tag'>Tag2</span> 
     <span class='dashfolio-tag'>Tag3</span> 
    </div>  


<input type="text" value="" placeholder="Add a tag" id = "add-tag-input" /> 

CSS：

.tag-container { 
max-width: 300px; /* helps wrap the tags in a specific width */ 

} 

.dashfolio-tag { 
    cursor:pointer; 
    background-color: blue; 
    padding: 5px 10px 5px 10px; 
    display: inline-block; 
    margin-top: 3px; /*incase tags go in next line, will space */ 
    color:#fff; 
    background:#789; 
    padding-right: 20px; /* adds space inside the tags for the 'x' button */ 
} 

.dashfolio-tag:hover{ 
    opacity:0.7; 
} 

.dashfolio-tag:after { 

position:absolute; 
content:"×"; 
padding:2px 2px; 
margin-left:2px; 
font-size:11px; 
} 

#add-tag-input { 
    background:#eee; 
    border:0; 
    margin:6px 6px 6px 0px ; /* t r b l */ 
    padding:5px; 
    width:auto; 
}   

JS：

$(document).ready(function(){ 
$(function(){ 

    $("#add-tag-input").on({ 
    focusout : function() { 
     var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters 
     if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); 


     this.value = ""; 
    }, 
    keyup : function(ev) { 
     // if: comma|enter (delimit more keyCodes with | pipe) 
     if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    } 
    }); 
    $('.tag-container').on('click', 'span', function() { 
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
    }); 

}); 

}); 

我的问题很简单，我怎么添加新的输入与dashfolio-tag类的跨度在#tag-container里面？我试图将insertBefore属性添加到正确的节点，但无济于事。在此先感谢你们！

Answer 1

更改这行代码，

if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); 

到

if(txt) { 
    $("<span/>", { 
     text:txt.toLowerCase(), 
     appendTo:"#tag-container", 
     class:"dashfolio-tag" 
    }); 
} 

观看演示：https://jsfiddle.net/2gvdsvos/4/

---

要解决的利润率在标签之间，

更新HTML来，

<div> 
    <div class="tag-container" id="tag-container"> 
    <span class='dashfolio-tag'>tag1</span> 
    <span class='dashfolio-tag'>tag2</span> 
    <span class='dashfolio-tag'>tag3</span> 
    </div> 
</div> 
<div> 
    <input type="text" value="" placeholder="Add a tag" id="add-tag-input" /> 
</div> 

这添加到CSS，

.tag-container:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

.dashfolio-tag { 
    ... 
    margin-right: 4px; 
    float: left; 
} 

希望这有助于！ ;）

https://jsfiddle.net/2gvdsvos/5/