js 在元素前后添加元素

在元素前后添加创建的元素

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sanai_1992</title><style>.item{ width: 100px; height: 100px; background-color: linen; }.item2{ width: 200px; height: 100px; background-color: lightblue; }</style>
</head>
<body><div id="container" class="container"><div class="item" id="item"></div></div>
</body>
<script>/*** name: addDomTopOrBottom => 在元素前后添加元素* params => ele:参照元素* params => newDom:需要插入的元素* params => position = 'bottom' ： 插入位置 top:ele元素前  bottom：ele元素后（默认）* */function addDomTopOrBottom(ele, newDom, position = 'bottom') {let parent = ele.parentNode;if(position === 'top') {parent.insertBefore(newDom, ele)}else if(position === 'bottom'){if (parent.lastChild === ele) {parent.appendChild(newDom);} else {parent.insertBefore(newDom, ele.nextSibling)}}}let dom = document.createElement("div");dom.className = 'item2';let dom1 = document.createElement("div");dom1.className = 'item2';addDomTopOrBottom(document.getElementById("item"),dom,'top')addDomTopOrBottom(document.getElementById("item"),dom1)
</script>
</html>

运行结果：

js 在元素前后添加元素相关推荐

js中给数组添加元素的方法有哪些
js中给数组添加元素的方法有哪些 unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefined push:将参数添加到 ...
js获取元素提示信息
js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...
JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
js获取元素节点对象
js获取元素节点对象
js操作元素节点对象value
js操作元素节点对象value
js操作元素节点对象innerHTML
js操作元素节点对象innerHTML
JS获取元素在页面的位置
JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度(width+padding) obj.clientHeight //元素的高度 obj ...
[js] 根据元素ID遍历树形结构，查找到所有父元素ID
[js] 根据元素ID遍历树形结构,查找到所有父元素ID var list = [{ "orgId": 1, "orgName": "校长办公室1&q ...
js获取元素的方法与属性
js获取元素的方法可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量 <scripttyp ...

js 在元素前后添加元素

在元素前后添加创建的元素

js 在元素前后添加元素相关推荐

最新文章

热门文章