是否有更好的方法来隐藏＆＃34;一个div？ （目前使用insertAdjacentHTML）

Question

所以这是我目前正在使用的javascript：

var submitcount = 0;
    function arrow(definition) {
        if (submitcount == 0 || submitcount % 2 == 0) {
            var extension = document.getElementById('one');
            extension.insertAdjacentHTML('beforeend', '<div id="before-two"><div id="two"><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtyTag(1,"seven")"></button><!----><button type="button" class="tag" id="seven" data-votes="0" data-upvotes="0">seven</button><!----><button type="button" class="right" onclick="modify_qtyTag(0,"seven")"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtyTag(1,"eight")"></button><!----><button type="button" class="tag" id="eight" data-votes="0" data-upvotes="0">eight</button><!----><button type="button" class="right" onclick="modify_qtyTag(0,"eight")"></button></div><p><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtyTag(1,"antonyms")"></button><!----><button type="button" class="tag" id="antonyms" data-votes="0" data-upvotes="0">antonyms</button><!----><button type="button" class="right" onclick="modify_qtyTag(0,"antonyms")"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtyTag(1,"gentle")"></button><!----><button type="button" class="tag" id="gentle" data-votes="0" data-upvotes="0">gentle</button><!----><button type="button" class="right" onclick="modify_qtyTag(0,"gentle")"></button></div></p></div></div></div>');
        }
        else if(document.getElementById('two')) {
            var deleted = document.getElementById('before-two');
            deleted.remove(deleted.selectedIndex);  
        }
        submitcount += 1;
    };

insertAdjacentHTML是巨大的，只会变得更大......必须有更好的方法来做到这一点，无论是通过Javascript还是只是HTML / CSS。请帮忙！

PS：如果您需要/想要完整的JSFiddle，请告诉我。

非常感谢！

Answer 1

您也可以在实际页面标记中包含您在insertAdjacentHTML中包含的HTML，然后使用CSS display属性隐藏它：

div#before-two {
    display: none;
}

然后，使用您的javascript选择#before-two并将其附加到#one并将CSS更改为display: block。