创建元素的方式

我与我401

已于 2024-04-23 14:02:03 修改

阅读量297

点赞数 5

文章标签： css 前端

于 2024-04-23 10:43:02 首次发布

本文链接：https://blog.csdn.net/yedu6/article/details/138115665

版权

<style>
    .hObj {
        background-color: palegoldenrod;
    }
</style>

<body>
    <div id="box"> </div>
    <div id="parent">
        <h1>我是parent本身就有的子元素</h1>
    </div>
    <button>点我删除元素</button>
</body>
<script>
    // 缺点只能在body里添加
    document.write("<header class=hObj>我是头部区域标签</header>")
    document.write("<p>段落</p>")

    // 缺点在普通钾元素的时候只能加一个，多余的被覆盖
    var box = document.querySelector("#box")
    box.innerHTML = "<a herf='#' alt>百度一下</a>"
    box.innerHTML = "<b>加粗</b>"
    // box.innerHTML += "<b>加粗</b>"

    //  document.createElement创建元素
    var parent = document.querySelector('#parent')
    var btn = document.querySelector('button')
    var h1 = document.querySelector("h1")
    var asideObj = document.createElement('aside')//创建
    asideObj.innerHTML = '我是侧边栏'//添加内容
    asideObj.setAttribute("class", "asideObj")//添加属性
    parent.append(asideObj)
    // 添加子元素   父元素.appendChild(子元素)
    // 删除子元素   父元素.removeChild(子元素)
    btn.onclick = function () {
        parent.removeChild(h1)
    }
</script>