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

编辑:管理员 发布时间:2021-10-28 18:56:412409

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

js示例:

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

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

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

示例1:

<div id="aaa"></div>

<script type="text/javascript">

var duanluo = document.createElement("p");

var newstr = 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:

<script type="text/javascript" src="jQuery.js"></script>

<script type="text/javascript">

function tianjia(){

var txt1="新的标签内容"; //添加新文本

var ys1="<div class=\"ysjd\">元素列表</div>";

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

}

</script>

<div id="xianshi"></div>

<button onClick="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代码方法.

TAGS: js 网页布局
热门文章
最新文章

热门标签

数学计算路径命令行表单字符符号nginxcookiejavapython数组文字处理小数服务器管理apache图片处理