如何使用js,添加子节点并且设置属性(class,id,onClick)进行定位。

如何使用js,添加子节点并且设置属性(class,id,onClick)进行定位。,第1张

太乱了,不想看,我估计你的意思就是说加节点,然后添加节点属性?

var elem=documentcreateElement('p');

elemsetAttribute("classname",'')//for ie//class for ff!

elemsetAttribute('id','');

得到要插入的元素,比如divx

documentgetElementById('divx')appendChild(elem)

搞定了

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

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

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

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

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

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

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

总结

1、创建一个testhtml文件。

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

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

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=documentcreateElement("p");

var node=documentcreateTextNode("这是一个新段落。");

paraappendChild(node);

var element=documentgetElementById("div1");

elementappendChild(para);

</script>

这段代码创建新的<p> 元素:

var para=documentcreateElement("p");

如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=documentcreateTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点:

paraappendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

var element=documentgetElementById("div1");

以下代码在已存在的元素后添加新元素:

elementappendChild(para);

在获取到父节点的情况下 var parentNode =

多次执行parentNodeappendChild(已经创建好的子节点);即可多次添加子节点

如果是jQuery就很好做:

var arr=$('#total')children('firstChild');//获取类firstChild的三个节点

然后遍历,获取子节点:

var list=[];//存放子节点

for(var i=0,len=arrlength;i<len;i++){

    var ele=$(arr[i])children();

    if(ele) listpush(ele);//我习惯判断一下ele是否有值,如果没有子节点的话:ele=undefined

}

以上就是关于如何使用js,添加子节点并且设置属性(class,id,onClick)进行定位。全部的内容,包括:如何使用js,添加子节点并且设置属性(class,id,onClick)进行定位。、JS如何获取某个DIV下的元素、怎么运用js或jquery,在已经获取父节点的情况下可以多次增加该节点的子节点等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10065216.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-04
下一篇 2023-05-04

发表评论

登录后才能评论

评论列表(0条)

保存