怎样动态的在网页中添加新的html标签元素

怎样动态的在网页中添加新的html标签元素,在一些动态网站中,有着滚动不同的字幕选择后弹出新的界面内容,但是查看它们这些网页代码的发现没有相关内容,通过审查元素才能看到before之类的提示.这样动态的在网页中添加新的html标签元素是怎样实现的呢

js示例:

在js代码中有appendChild()方法与insertBefore()方法用来为页面添加新节点.

appendChild():表示在指定元素开头插入新节点

nsertBefore():表示在指定元素的末尾插入新节点

示例1:

<divid=”aaa”></div>

<scripttype=”text/javascript”>

varduanluo=document.createElement(“p”);

varnewstr=document.createTextNode(“xxxx新内容”);

duanluo.appendChild(newstr);

document.getElementById(“aaa”).appendChild(duanluo);

</script>

创建一个段落节点定义为duanluo,然后创建文本节点设置内容为”xxxx新内容”,把文本节点增加到段落的节点里,再显示标签id为aaa的div元素中去.

appendChild方法可向当前节点的子节点列表末尾添加新的子节点,而insertBefore()方法可向指定节点的子节点列表的开头位置添加新的子节点。

用法如下:

insertBefore(新插入的节点,需要插入新节点的节点)

insertBefore方法与appendChild方法一样,它们能够将指定元素与其包含所有的子节点一起插入指定的位置去。会先删除移动的元素,然后再插入到新的位置中.

如果需要删除子节点那么,父元素.removeChild(子节点)可以删除已有元素.

使用js代码直接对网页元素进行操作比较麻烦,为了更加的便捷我们可以添加一个js插件jQuery,在jQuery插件里,有多种方法可以很方便的操作html元素与内容.

示例2:

<scripttype=”text/javascript”src=”jQuery.js”></script>

<scripttype=”text/javascript”>

functiontianjia(){

vartxt1=”新的标签内容”;//添加新文本

varys1=”<divclass=\”ysjd\”>元素列表</div>”;

$(“#xianshi”).append(txt1,ys1);//添加新元素

}

</script>

<divid=”xianshi”></div>

<buttononClick=”tianjia();”>添加新内容</button>

只需要点击添加新内容按钮,就可以快速的添加新div标签.

需要注意的是,代码开始前要先引用jQuery.js.

在制作jquery插件中,添加新div标签元素或文字内容经常用到的:prepend、append、before、after这几个方法.

prepend():在当前父系元素开头添加新元素内容

$(“#id”).prepend(“xxx文字”);

append():在当前的父系元素的结尾插入新内容

$(“#id”).append(“xxx文字”);

before():在当前的同级别标签之前插入新元素

$(“#id”).before(“xxx文字”);

after():在当前同级别元素的后面添加新的内容

$(“#id”).after(“xxx文字”);

以上就是一些为了在网页中动态添加新节点元素的一些前端js代码方法.

本站部分素材资源及板块内容来自网络,如有侵犯您的权益,请联系我们,站长会立即处理,转载请注明来源网址!
云部落资源网 » 怎样动态的在网页中添加新的html标签元素