添加或刪除子元素
元素實例擁有類似數組的特性，添加或刪除節點只需要使用數組那幾個操作方法即可；其中使用 push、unshift、pop、shift、splice 方法時，內部會自動執行 $ 方法 的初始化操作，所以可以直接填寫具體的元素字符串或對象。
同樣的，您也可以使用其他數組方法，例如 forEach、map、some 等等。
請注意，在具有模板語法的元素上不要添加或刪除子元素。
push
從末尾添加子元素。
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.21/dist/ofa.min.js"></script>
<ul>
<li>I am 1</li>
<li>I am 2</li>
<li>I am 3</li>
</ul>
<script>
setTimeout(()=>{
$("ul").push(`<li style="color:red;">new li</li>`);
}, 500);
</script>
unshift
在數組的開頭添加子元素。下面是一個示例：
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.21/dist/ofa.min.js"></script>
<ul>
<li>I am 1</li>
<li>I am 2</li>
<li>I am 3</li>
</ul>
<script>
setTimeout(()=>{
$("ul").unshift(`<li style="color:blue;">new li</li>`);
}, 500);
</script>
pop
從末尾刪除子元素。
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.21/dist/ofa.min.js"></script>
<ul>
<li>I am 1</li>
<li>I am 2</li>
<li>I am 3</li>
</ul>
<script>
setTimeout(()=>{
$("ul").pop();
}, 500);
</script>
shift
在數組的開頭刪除子元素。
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.21/dist/ofa.min.js"></script>
<ul>
<li>I am 1</li>
<li>I am 2</li>
<li>I am 3</li>
</ul>
<script>
setTimeout(()=>{
$("ul").shift();
}, 500);
</script>
splice
可以刪除或替換現有子元素，也可以添加新子元素。其使用方式與數組的 splice 方法相似。下面是一個示例：
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.21/dist/ofa.min.js"></script>
<ul>
<li>I am 1</li>
<li>I am 2</li>
<li>I am 3</li>
</ul>
<script>
setTimeout(()=>{
$("ul").splice(1, 2, `<li style="color:green;">new li 1</li>`, `<li style="color:green;">new li 2</li>`);
}, 500);
</script>