原生js中如何添加dom元素

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>

效果：

原生js中如何添加dom元素相关推荐

原生js来实现对dom元素class的操作方法
jQuery操作class的方式非常强大写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的 ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
【第48天】AJAX在原生JS中的使用，处理XML数据以及DBUtils的使用，假删除（标记删除）
1 介绍 1.1 同步和异步 1.1.1 基于AJAX的异步传输与传统同步传输的对比 1.1.2 使用时间线表示同步和异步在过程上的区别 1.2 JS与AJAX的关系 1.3 AJAX用到的技术 1. ...
原生js中nextSibling和nextElementSibling的坑
作者:拓海老师,公众号:拓海老师一直以来js的随性让初学者蛋疼菊紧,但是真正玩熟了之后,还是非常有意思的! 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑! 业务场景:点击当前元 ...

原生js中如何添加dom元素

原生js中如何添加dom元素相关推荐

最新文章

热门文章