js如何在元素前添加元素

js如何在元素前添加元素,第1张

创建html页面 1)打开记事本,输入如下截图所示的html代码2)将文件保存为html结尾的文件,例如JsTest.html

运行页面 1)上一步保存完成后,双击文件即可使用默认浏览器运行页面2)如果想使用指定浏览器运行,右键文件,选择【打开方式】->挑选任一已经安装的浏览器即可

原生JS方式,详细代码与注释 主要使用的js方法: 父元素.insertBefore(新元素, 目标元素)

原生JS方式,运行效果如下 Jquery方式,必须要引入jquery文件才能使用,此处将jquery下载下来放到Content文件夹中,新的目录结构如下-- Content-- jquery-1.11.3.min.js-- JsTest.html

Jquery方式,详细代码与相关注释见截图 主要使用的jquery方法:before(html文本内容即可)

Jquery方式,运行效果如下 JS JQUERY

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('#a').before('<div>789</div>')。

3、浏览器运行index.html页面,此时在div标签“123”的最前面成功插入了新的元素“789”。

js在标签最前面插入元素方法:

1、var divObj=document.createElement("div")。

2、//divObj.setAttribute('id','topAlert')。

3、divObj.innerHTML="测试js插入DOM和样式"

4、var first=document.body.firstChild//得到页面的第一个元素。  

5、document.body.insertBefore(divObj,first)//在得到的第一个元素之前插入。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11855689.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存