JS如何获取某个DIV下的元素

JavaScript016

JS如何获取某个DIV下的元素,第1张

1、新建一个html文件,命名为test.html,用于讲解Jquery如何获得div下的元素。

2、在test.html文件内,使用div标签创建一个模块,在div内,使用p标签,span标签创建测试的内容。

3、在test.html文件内,设置div的id属性为divcon,主要用于下面通过该id获得div对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“获得div下的元素”。

5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行divfun()函数。

6、在js标签中,创建divfun()函数,在函数内,通过id(divcon)获得div对象,使用html()方法便可以获得div对象下面的元素了。最后,使用alert()方法输出元素。

7、在浏览器打开test.html文件,点击按钮,查看结果。

总结

1、创建一个test.html文件。

2、在文件内,在div标签内,使用p标签创建一行文字,同时创建一个button按钮,用于触发执行js函数。

3、在js标签内,创建函数,在函数内,使用getElementById()方法通过id(mydiv)获是div对象,再使用getElementsByTagName()方法获得div下面的p元素对象,最后,使用alert()方法输出p元素的内容。

利用JavaScript动态添加Div的方式有很多,一下是个比较常用的。

一、在一个Div前添加Div

二、使用js动态创建div

扩展资料:

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

js获取div里的元素个数方法是:先得到父元素,再得到父元素下的某标签类别的子元素,最后统计出子元素的长度就可以简单实现了。

js 动态添加元素(div、li、img等)及设置属性的方法:

一、js 动态添加元素div

<div id="parent"></div>

function addElementDiv(obj) {var parent = document.getElementById(obj)//添加 divvar div =

document.createElement("div")//

设置 div 属性,如 iddiv.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)//添加 livar li =

document.createElement("li")//

设置 li 属性,如 idli.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)//添加 livar li =

document.createElement("li")//添加 imgvar img = document.createElement("img")//

设置 img 属性,如 idimg.setAttribute("id", "newImg")//设置 img 图片地址img.src =

"/images/prod.jpg"

li.appendChild(img)ul.appendChild(li)}

调用:addElementImg("parentUl")