原生js中如何添加dom元素

最新推荐文章于 2024-06-25 19:24:28 发布

哒玲

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量3.8w

点赞数 4

分类专栏： JavaScript 文章标签： insertBefore appendChild

本文链接：https://blog.csdn.net/zl13015214442/article/details/90453400

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1. appendChild()

概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
使用方式：fatherdom.appendChild( insertdom )。
兼容性：所有浏览器都支持此方法。

2. insertBefore()

概念：把要插入的节点添加到指定父级里面的指定节点之前。
使用方式：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

3. 举例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>practise</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <style>
    #container {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
<div id="container">
   <div class="aa">aa</div>
  <div class="bb">bb</div>
</div>
<script>
  var Java = function (content) {
    this.content = content;
    (function (content) {
      var div = document.createElement('div');
      div.innerHTML = content;
      div.style.color = 'green';
      document.getElementById('container').appendChild(div)
    })(content)
  };

  var Html = function (content) {
    this.content = content;
    (function (content) {
      var div = document.createElement('div');
      div.innerHTML = content;
      div.style.color = 'red';
      var bb = document.getElementsByClassName("bb")[0];
      document.getElementById('container').insertBefore(div, bb)
    })(content)
  };

  Java("这里是Java模块");
  Html("这里是HTML模块");
</script>
</body>
</html>

效果：
在这里插入图片描述

哒玲

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
原生js中如何添加dom元素

1. appendChild()概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。使用方式：fatherdom.appendChild( insertdom )。兼容性：所有浏览器都支持此方法。2. insertBefore()概念：把要插入的节点添加到指定父级里面的指定节点之前。使用方式：fatherdom.insertBefore( insertdom，chose...
复制链接

扫一扫

专栏目录