1、在我们的电脑上打开软件，新建一个html页面。
2、在html页面创建一个id为xx，值为666的文本框，通过var v=document.getElementById('xx').value原生js方法来获取文本框的值。
3、在script中加上alert(v)，来弹框查看原生js方法是否根据id获取元素的值了。
4、在浏览器中运行项目，可以看到页面弹框的值是id为xx的元素的值，已经成功通过原生js方法根据id获取元素。
5、jquery方法需要先添加jquery.js,然后通过var w = $('#xx').val()来获取元素的值。
6、运行项目，在浏览器中可以看到与原生js方法获得元素的值相同。
把一串html
标签赋给一个
javascript
变量，除属性的值要用转义的双引号外，某些时候字符串还很长，显得有些复杂。如果用
js
动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。
网页是由
html
标签一层层组成的，js
也可以动态添加一层层的诸如
div、li、img
这样的标签。其实，不管是什么
html
标签，js
动态创建的方法都差不多，接着就先从动态添加
div
开始。
一、js
动态添加元素div
<div
id="parent"></div>
function
addElementDiv(obj)
{
var
parent
=
document.getElementById(obj)
//添加
div
var
div
=
document.createElement("div")
//设置
div
属性，如
id
div.setAttribute("id",
"newDiv")
div.innerHTML
=
"js
动态添加div"
parent.appendChild(div)
}
调用：addElementDiv("parent")
二、js
动态添加li
<ul
id="parentUl"><li>原li</li></ul>
function
addElementLi(obj)
{
var
ul
=
document.getElementById(obj)
//添加
li
var
li
=
document.createElement("li")
//设置
li
属性，如
id
li.setAttribute("id",
"newli")
li.innerHTML
=
"js
动态添加li"
ul.appendChild(li)
}
调用：addElementLi("parentUl")
三、js
动态添加元素img
<ul
id="parentUl"></ul>
function
addElementImg(obj)
{
var
ul
=
document.getElementById(obj)
//添加
li
var
li
=
document.createElement("li")
//添加
img
var
img
=
document.createElement("img")
//设置
img
属性，如
id
img.setAttribute("id",
"newImg")
//设置
img
图片地址
img.src
=
"/images/prod.jpg"
li.appendChild(img)
ul.appendChild(li)
}
调用：addElementImg("parentUl")
以上这篇js
动态添加元素(div、li、img等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
//1、首先获取div的父节点//2、创建一个新节点
//3、将新节点添加到div节点后面
//具体操作如下：
var divs = document.getElementsByTagName("DIV")//获取页面中所有div
for(var i=0i<divs.lengthi++) {
var div = divs[i]//获取第i个div
var divParent = div.parentNode//获取该div的父节点
var newNode = document.createTextNode("文本节点")//创建文本节点
var next = div.nextSibling//获取div的下一个兄弟节点
//判断兄弟节点是否存在
if(next) {
//存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode,next)
} else {
//不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode)
}
}
//以下是一些常用js操作
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")
