JS中元素节点的操作

最新推荐文章于 2024-10-30 19:10:39 发布

Stirve unremitting

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量107

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46421045/article/details/106677360

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript动态创建与克隆DOM元素，包括创建div元素、设置样式、添加到页面以及克隆元素的过程。通过示例代码详细解释了如何利用JavaScript操作DOM，实现元素的创建与复用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background: red;
    }
  </style>
</head>
<body>

  <script>
    // 创建一个div元素,用box变量来接收
    var box = document.createElement('div')
    box.innerHTML = 'box4'
    // 通过js style属性设置的样式统一都在行内
    // box.style.width = '200px'
    // box.style.height = '200px'
    // box.style.background = 'red'

    // 我们可以在css里先把样式预设好,这里只需要修改对应class就行了
    box.classList.add('box')

    console.log(document.body) // body元素是唯一的,可以直接document.body来获取

    // appendChild方法来往body的结束去追加box作为body的最后一个子元素
    document.body.appendChild(box)

    // 如果反复append同一个box,那么最终也会只有一个
    // document.body.appendChild(box)

    // 先克隆(复制),在append
    // var box1 = box.cloneNode()
    // 克隆分为深克隆和浅克隆,浅克隆只克隆元素本身,不会克隆子元素和内容,默认是浅克隆
    // cloneNode方法有一个参数,默认值是false,代表浅克隆,true代表深克隆,就会连着内容一起克隆
    var box1 = box.cloneNode(true)
    document.body.appendChild(box1)

    // 注意点:如果元素有id属性,最好不要直接克隆,否则会出现两个id相同的元素

  </script>
</body>
</html>