如何根据位置在div中添加和删除子项？

Question

我的以下代码是：http://jsfiddle.net/j67AM/

<div id="container">
    <div id="data">
        <div>some random text</div>
        <div>more random text</div>
        <div>random</div>
        <div>text</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
        <div>sdads</div>
    </div>
</div>

CSS：

#container {
    border: 1px solid black;
    height: 300px;
    width: 500px;
    overflow: auto;
    white-space: nowrap;
}

在JavaScript中删除不可见的每个div的最佳方法是什么？然后添加div，如果它变得可见。

例如，如果我要在“数据”中添加3000 div，那么它很可能会“滞后”页面，所以我试图想出一个只会呈现内部可见内容的解决方案容器

由于