javascript - ページを更新せずにdivのliにアイテムを追加および削除する

Question

私はJavaScriptが初めてで、助けが必要です。

独自の送信ボタンを持つフォームタグ内に div タグがあります。この div タグ内には、いくつかの名前を持つコンボックスと、2 つのボタンがあります。

私の問題は、名前を選択して追加ボタンを押すと、それを行うjavascript関数を呼び出すだけでなく、htmlページを更新することです。私はそれをしたくありません。

どうすればできますか？

form タグがなくても問題なく動作します。

よろしくお願いします

コードは次のとおりです。

<@s.form action="confuserpermission" theme="simple">
<@s.hidden name="saveuserpermission" value="true"/>
<div style="float: left; margin-top: 0.8em;">
    <h5 style="color: #1E1E1E;">Login Utilizador:</h5>
<div class="input">
    <@s.textfield name="confUserBean.name" label="Nome" cssClass="input"/>
</div>
<div style="display: inline">
    <h5 style="color: #1E1E1E; display: inline">Escolhe e Adiciona uma Entidade</h5>
    <select id="entityList">
        <option value="default">-----Select-----</option>
        <@s.iterator value="listaEntidades">
            <option value="<@s.property />"><@s.property /></option>
        </@s.iterator>
    </select>
    <button class="submit" onclick="adicionaEntidade()">Adicionar</button> <button class="submit" onclick="removaEntidade()">Remover</button>
    <ul id="myList"></ul>
</div>

<script>
    function isInArray(value, array) {
        return array.indexOf(value) > -1 ? true : false;
    }
    function checkIfEntityIsAlreadyInList(entidade) {
        var texts = [], lis = document.getElementById("myList").childNodes;
        for (var i = 0, im = lis.length; im > i; i++) {
            texts.push(lis[i].firstChild.nodeValue);
        }
        return isInArray(entidade, texts);
    }
    function adicionaEntidade()
    {
        var e = document.getElementById("entityList");
        var entidade = e.options[e.selectedIndex].value;
        if (entidade !== "default" && !checkIfEntityIsAlreadyInList(entidade)) {
            var node = document.createElement("LI");
            var textnode = document.createTextNode(entidade);
            var fileTypeNode = document.createElement("UL");
            var optionArray = ["PSX", "PS2", "XLS"];
            for (var option in optionArray) {
                if (optionArray.hasOwnProperty(option)) {
                    var pair = optionArray[option];
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.name = pair;
                    checkbox.value = pair;
                    fileTypeNode.appendChild(checkbox);
                    var label = document.createElement('label');
                    label.htmlFor = pair;
                    label.appendChild(document.createTextNode(pair));
                    fileTypeNode.appendChild(label);
                    //fileTypeNode.appendChild(document.createElement("br"));
                }
            }

            node.appendChild(textnode);
            node.appendChild(fileTypeNode);
            document.getElementById("myList").appendChild(node);
        }
    }
    function removaEntidade()
    {
        var e = document.getElementById("entityList");
        var entidade = e.options[e.selectedIndex].value;
        if (entidade !== "default" && checkIfEntityIsAlreadyInList(entidade)) {
            var lis =  document.getElementById("myList").childNodes;
            var indexOfChildToRemove = -1;
            for (var i = 0, im = lis.length; im > i; i++) {
                if(lis[i].firstChild.nodeValue === entidade){
                    indexOfChildToRemove = i;
                    break;
                }
            }
            if(indexOfChildToRemove>-1){
                document.getElementById("myList").childNodes[indexOfChildToRemove].remove(indexOfChildToRemove);
            }
        }
    }
</script>
<div class="submit">
    <@s.submit theme="xhtml" value="Guardar"/>
</div>