如何用js在页面中添加元素

一、如何用js在页面中添加元素

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

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

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

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

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

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

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

二、js在元素后面添加元素

js如何在指定id的div后面(注意是后面,不是里面啊!)插入一个新的div...

利用js代码首先创建一个div，document.createElement(div)；确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。确定位置之后，显示div即可。

利用js代码首先创建一个div，document.createElement(div)；确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。确定位置之后，显示div即可。

双击打开HBuilder并新建一个静态页面，在页面中引入jquery文件。在body/body标签内，插入一个div标签并在其中插入一个无序列表。接着在jQuery初始化函数中，利用jqueryeach函数遍历循环ulli。

获取alt属性的值。通过jQuery的attr方法将获取的alt属性的值赋值给title属性。通过jQuery的after方法将h4标签追加到img的后面。

首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。通过value属性我们可以获得用户在input中输入的内容，如下图所示。

在index.html中的script标签，输入jquery代码：vara=125；$(body).append(divid=id+a+hello/div)；浏览器运行index.html页面，此时动态添加div成功。

如下参考：页面复制有一个id为c2的div，下面有一个子div，下面有一个按钮，事件是用来点击100个adddiv。在event函数中，定义一个内容为degreediv字符的字符串变量。

想要在页面动态添加元素，首先要确定在哪个元素后面添加元素，然后利用js的appendChild方法在该元素后面追加元素。获取父节点元素varbody=document.getElementsByTagName(body)[0]。

可以用appendChild，innerHTML等实现。最常用的是appendChild，也就是给当前元素添加子元素，并且追加到最后。

newelement1必需。要添加到数组的第一个元素。newelement2可选。要添加到数组的第二个元素。newelementX可选。可添加多个元素。

网上(如秒秒学)都不使用。更常用添加节点的方式，来添加子元素。这样更加准确和具体的描述了DOM的变化。

1、Array.shift()---删除并返回第一个元素作用：从数组中删除第一个元素（即下标为0的元素），并返回该元素。注意：1）删除元素之后，数组的长度-1。

2、在JsArray中的方法大致分为两类：方法改变原数组&方法生成新数组（不改变原数组）push()：向原数组的最后一位添加一个元素。返回数组长度unshift()：向原数组的最前添加一个元素。

3、该方法的效果和join方法一样，都是用于数组转字符串的，但是与join方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。

4、数组的创建方式字面量的形式：vararr=[1，2，3]；构造函数：vararr1=newArray()；//不常用Array构造函数有一个很大的缺陷，就是不同的参数，会导致它的行为不一致。

5、filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。item是当前元素的值，index是当前元素的索引值。indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。

6、push()可以将某些值加入到数组的最后一个位置，并且不限制添加数量(注：数组长度是有限制的)，如果需要添加多项内容使用逗号隔开即可，加入后数组长度会增加。

三、怎么使用js创建

1、创建一个元素时，使用createElement()函数

2、设置元素属性可以有以下两种常用方式，首先获得具体元素的引用，

a)然后使用elementName.id="";设置她的id属性，同样可以设置name等属性，具体针对不同的页面元素有不同的属性，可以参考DHTML参考手册

b)使用setAttribute函数，elementName.setAttribute("id","elementId");

两种方式各有千秋，例如在设置class属性时就存在a)不好使用的情况，在使用中需要注意。

3、删除页面元素。删除时首先需要获得需要删除的元素的引用，然后使用removeChild函数就可以删除该元素了。必须要获得引用后才可以删除（注意）。

4、无论是创建或者删除页面元素，针对的对象是document.body。如果需要查看生成页面元素后的代码，需要使用document.body.innerHTML来查看，直接查看源文件是无法看见的。

5、设置disable属性也比较简单，只需要将其作为button对象的一个属性，设置为true就可以了。

button.setAttribute("class","bt");//Mozilla设置class的方法

button.setAttribute("className","bt");//IE设置class的方法

/*下面的设置方法在Mozilla中有效，在IE中无效*/