js 原生将元素插入到父元素首位，jquery和原生两种方式

一般来说我们新加的元素会放置到父元素的首位   但也有放到首位的那种可能，每次追加元素 放到最前面 

业务还是有这种需求的  可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架的童鞋 就不用考虑这个问题了

直接就是数据驱动 的 直接关注数据业务层就行了  少去了很多麻烦

这里就讲解下 js原生 和jq两种方式 将元素插入到首位吧

写之前 先声明下 dom结构吧

<div class="parent">
        <h1>hello world</h1>
    </div>
    <button class="layui-btn layui-btn-normal" id="jq">追加到首位(jquery)</button>
    <button class="layui-btn layui-btn-normal" id="js">追加到首位(原生js)</button>

1. jq

$('#jq').click(function() {
                $('.parent').prepend($(`<h2>1111111111111111</h2>`))
            })

2. 原生

var js = document.querySelector('#js');
        var parent = document.querySelector('.parent');
        var h2 = document.createElement('h2');
        h2.innerHTML = "22222222";
        js.onclick= function() {
            parent.insertBefore(h2, parent.children[0]);
        }

展示效果

关注我 持续更新前端知识