首页 > 软件开发 > JQUERY >

js如何在元素前添加元素

来源:互联网 2023-03-17 00:46:57 版权归原作者所有,如有侵权,请联系我们

js是浏览器客户端执行的语言,那么要如何通过js在元素前面添加新的元素呢?s0T办公区 - 实用经验教程分享!

本文介绍两种实现方式(jquery方式代码更简洁易懂):s0T办公区 - 实用经验教程分享!

1、原生JS方式s0T办公区 - 实用经验教程分享!

2、Jquery方式s0T办公区 - 实用经验教程分享!

方法/步骤

  • 1

    创建html页面s0T办公区 - 实用经验教程分享!

    1)打开记事本,输入如下截图所示的趴叮肤html代码s0T办公区 - 实用经验教程分享!

    2)将文件保存为html结尾的文件,例如JsTest.htmls0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 2

    运行页面s0T办公区 - 实用经验教程分享!

    1)上一步保存完成后,双击文件即可使用默认浏览器运行页面s0T办公区 - 实用经验教程分享!

    2)如果想使用指定浏览器运行,右键文件,选择【打开方式】-> 挑选任一已经安装的浏览器即可s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 3

    原生JS方式,详细代码与注释见截丽帽图s0T办公区 - 实用经验教程分享!

    主要使用的js方法: 父元素.insertBefore(新元素, 目标元素)s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 4

    原生JS方式,运行效果如下s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 5

    Jquery方式,必须要引入jquery文件才能使用,此处将jquery下载下来放到Content文件夹中,新矿戴的目录结构如下s0T办公区 - 实用经验教程分享!

    -- Contents0T办公区 - 实用经验教程分享!

    -- jquery-1.11.3.min.jss0T办公区 - 实用经验教程分享!

    -- JsTest.htmls0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 6

    Jquery方式,详细代码与相关注释见截图s0T办公区 - 实用经验教程分享!

    主要使用的jquery方法:before(html文本内容即可)s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 7

    Jquery方式,运行效果如下s0T办公区 - 实用经验教程分享!

    js如何在元素前添加元素s0T办公区 - 实用经验教程分享!

  • 7此文章未经许可获取自百度经验
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!s0T办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号