【Javascript】HtmlでNodeの子要素に加える方法

2021-8-24

meko

一番最初に加える

prepend()を使います
子要素の一番初めに追加されます

使用例

コード

<!-- .html -->
<div id="parent">
    <div class="child">Child</div>
</div>

<script>
    let parent1 = document.getElementById("parent");
    let newChild2 = document.createElement("div");
    newChild2.innerHTML = "new!";
    parent1.prepend(newChild2);
</script>

<!-- style -->
<style>
    #parent > div:not(.child) {
        background: #bd081c;
        display: inline-block;
        width: 4rem;
        height: 4rem;
        border-radius: 50% 70% 60% 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
</style>
Copy

一番最後に加える

appendChild()を使います
子要素の一番最後に追加されます

使用例

コード

<!-- .html -->
<div id="parent">
    <div class="child">Child</div>
</div>

<script>
    let parent = document.getElementById("parent");
    let newChild = document.createElement("div");
    newChild.innerHTML = "new!";
    parent.appendChild(newChild);
</script>

<!-- style -->
<style>
    #parent > div:not(.child) {
        background: #3b5998;
        display: inline-block;
        width: 4rem;
        height: 4rem;
        border-radius: 50% 70% 60% 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
</style>
Copy

参考

Element.prepend()
Node.appendChild()