zoukankan      html  css  js  c++  java
  • js 在一个DIV前、中、后、插入新DIV

    之前做了一个项目,不能用jquery写代码,只能用原生的js写插入,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    	<meta charset="utf-8" />
        <style>
            div {
            border:solid 1px #ff0000;
            }
        </style>
        <script >
            window.onload = function () {
                
                var vtop = "js插入上面";
                var vcenter = "js中插入";
                var vbottom = "js插入下面";
                var vcurrent = document.getElementById("1");
                //上面
                var newNodeTop = document.createElement("div");
                newNodeTop.innerHTML = vtop;
                vcurrent.parentNode.insertBefore(newNodeTop, vcurrent);
                //中间
                var newNodeCenter = document.createElement("div");
                newNodeCenter.innerHTML = vcenter;
                vcurrent.appendChild(newNodeCenter);
                //下面
                var newNodeBottom = document.createElement("div");
                newNodeBottom.innerHTML = vbottom;
                vcurrent.parentNode.insertBefore(newNodeBottom, vcurrent.nextSibling)
    
            }
        </script>
    </head>
    <body>
        <div id="1">current DIV</div>
    </body>
    </html>
    

      

  • 相关阅读:
    05-浮动/css
    04-选择器/css
    03-样式表/css
    02-html标签&表格&表单
    01-html基础&标签
    vue分页组件重置到首页问题
    VUE通过索引值获取数据不渲染的问题
    常见IE8兼容性问题及解决
    Ajax
    sea.js模块化工具
  • 原文地址:https://www.cnblogs.com/cxd1008/p/6795052.html
Copyright © 2011-2022 走看看