js如何在元素前添加元素

创建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

1.首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。

2.然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。

3.通过value属性我们可以获得用户在input中输入的内容，如下图所示。

4.下面我们来动态创建一个li元素，如下图所示，运用document中的createElement方法即可。

5.创建好li元素以后，下面要做的就是给其设置innerHTML内容，如下图所示。

6.接下来就是获取ul元素了，如下图所示，仍然用getElementById方法。

7.最后通过调用appendChild方法将创建的li元素添加到ul列表中，如下图所示。

---