javascript如何在div的后面添加一个其他的元素

一、javascript如何在div的后面添加一个其他的元素

//3、将新节点添加到div节点后面

var divs= document.getElementsByTagName("DIV");//获取页面中所有div

for(var i=0; i<divs.length; i++){

var div= divs[i];//获取第i个div

var divParent= div.parentNode;//获取该div的父节点

var newNode= document.createTextNode("文本节点");//创建文本节点

var next= div.nextSibling;//获取div的下一个兄弟节点

//存在则将新节点插入到div的下一个兄弟节点之前，即div之后

divParent.insertBefore(newNode,next);

//不存在则直接添加到最后,appendChild默认添加到divParent的最后

divParent.appendChild(newNode);

var textNode= document.createTextNode("xxx");//创建文本节点

var elementNode= document.createElement("p");//创建元素节点(p)

var body= document.getElementsByTagName("body")[0];//获取body节点

body.appendChild(elementNode);//元素节点添加到body节点下，添加在末尾

elementNode.appendChild(textNode);//将文件节点添加到元素节点下

//获取要删除的节点，elementNode.length-1表示最后一个指定节点(这里表示最后一个p节点)

var delElementNode= elementNode.item(elementNode.length-1);

body.removeChild(delElementNode)；//移除指定节点

body.insertBefore(newNode, oldNode);//在body中的oldNode前插入newNode节点

body.replaceChild(newNode, oldNode);//将body中的oldNode替换为newNode节点

var style= document.createAttribute("style");

option.attributes.setNamedItem(style);

option.setAttribute("style","color:red");

二、JavaScript给数组添加元素的6个方法

1、使用length属性，可以在数组末尾后面添加一个元素：

2、console.log(arr);// [1, 2, 3, 4, 5, 6];

3、push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度：

4、console.log(arr);// [1, 2, 3, 4, 5, 6];

5、unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度：

6、console.log(arr);// [6, 1, 2, 3, 4, 5];

7、splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容：

8、console.log(arr);// [1, 2, 3, 4, 5, 6];

9、concat()方法用于将一个数组或值合并至一个数组中，该方法不会改变原数组：

10、console.log(newArr);// [1, 2, 3, 4, 5, 6];

11、展开语法...:可以在数组构造时,将数组表达式在语法层面展开：

12、console.log(arr);// [1, 2, 3, 4, 5, 6];

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

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

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

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

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

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

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

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