如何用js在页面中添加元素?

作者&投稿:庾佩 (若有异议请与网页底部的电邮联系)
如何用js在页面中添加元素?~

var
mask
=
document.createElement("div");//js新建元素
mask.setAttribute("id",
"maskDiv");//给元素加id
mask.onclick
=
hideMask;//给元素添加点击事件
var
img
=
document.createElement("img");
img.style.float
=
"right";//js设置样式
img.src
=
"http://520.com/images/download_android.png";
img.style.width
=
"320px";
img.style.float
=
"right";
mask.appendChild(img);
document.body.appendChild(mask);//把元素放进body标签里面

js添加的元素和页面中原有的元素,对于jquery来说是一样的.
比如:documnet.getElementById("id").innerHtml='<div
id="d">';
上面代码向id为id的元素中添加了一个div元素.
对于jquery来说可以正常获取:$("#d").

1.首先创建html结构,如下图所示,一个input元素,一个按钮,一个空的ul列表。

2.然后添加按钮点击事件,如下图所示,在按钮点击事件中获得input元素。

3.通过value属性我们可以获得用户在input中输入的内容,如下图所示。

4.下面我们来动态创建一个li元素,如下图所示,运用document中的createElement方法即可。

5.创建好li元素以后,下面要做的就是给其设置innerHTML内容,如下图所示。

6.接下来就是获取ul元素了,如下图所示,仍然用getElementById方法。

7.最后通过调用appendChild方法将创建的li元素添加到ul列表中,如下图所示。



object.insertAdjacentHTML(sWhere, sText)

在指定位置的元素中插入给定的 HTML 文本。

beforeBegin

afterBegin

beforeEnd

afterEnd

例:document.body.insertAdjacentHTML(beforeEnd,"<a></a>")

扩展资料:

添加元素中用到的c语言

1、append():前面是被插入的对象,最后面增加子元素,父子级关系。

2、appendto():后面是被插入对象,最后面增加子元素,父子级关系。

3、prepend():前面是被插入对象,最前面增加子元素,父子级关系。

4、prependTo():后面是插入对象,最前面增加子元素,父子级关系。

5、before():前面是插入对象,之前增加元素,同级关系。

6、after():前面是插入对象,之后加入元素,同级关系。

7、insertbefore():后面是插入对象,之前加入元素,同级关系。

8、insertafter():后面是插入对象,之后加入元素,同级关系。



使用HTML DOM appendChild() 方法实现元素的添加。

函数解析及实例实现过程如下:

1、定义和用法:

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。

如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

可以使用 appendChild() 方法移除元素到另外一个元素。

2、创建一个简单的的html代码,如下:

3、设计一个函数,通过此函数可以在目标元素内添加新的标签元素。

4、此时的页面展示如下:

5、点击按钮,实现元素添加:

6、查看此时dom节点:(已加入a标签)



想要在页面动态添加元素,首先要确定在哪个元素后面添加元素,然后利用js的appendChild方法在该元素后面追加元素。

1.获取父节点元素var body = document.getElementsByTagName('body')[0]。

2.然后动态创建a标签var a = document.createElement('a')。

3.把创建好的a标签追加到body下面body.appendChild(a)。

4.在a标签里面添加文本内容a.innerHTML = '这是一个链接'。

5.给a标签添加一个链接a.href = 'https://www.baidu.com/'。

扩展资料:

js一些原生方法

element.appendChild()方法向节点添加最后一个子节点。

element.innerHTML设置或返回元素的内容。

document.getElementsByTagName()返回带有指定标签名的对象集合。

document.getElementById()返回对拥有指定 id 的第一个对象的引用。

document.createElement()通过指定名称创建一个元素。



js代码中有个data要放入已经封装好的js对象grid(dojo对象类似aspx中的DataList、gridView),想让显示的表格单元中的某一列变成链接,从网络中查到如下方法,但是这里就算创建出网页元素a,但是他还是要appendChild到某一个已有的网页元素中,这里没有这样的网页元素,

1.创建链接

1 <script language="javascript">

2 var o = document.body;

3 //创建链接

4 function createA(url,text)

5 {

6     var a = document.createElement("a");

7     a.href = url;

8     a.innerHTML = text;

9     a.style.color = "red";

10     o.appendChild(a);

11 }

12 createA("http://www.webjx.com/","网页教学网");

13 </script>

扩展资料

添加元素中用到的c语言:

while(scanf("%d",&n)!=EOF&&n==0) //表示你一直可以输入 整型 的数字 知道你输入 数字为0结束

while(scanf("%d %d",&n,&m)!=EOF&&n==0||m==0) //表示你一直可以输入 整型 的数字 直到m和n

都是0 结束。while(scanf("%d %d",&n,&m)!=EOF&&n==0&&m==0) //表示你一直可以输入 整型 的数字 直到m和n中有一个数字 或者都为 0 结束。

参考资料:百度百科-JavaScript



在一个用html和PHP写的网页页面里想用JS实现这样一个效果
答:可行啊,数据都存数组,然后提交数组给后台,比如你有5个,a[],b[],c[],d[],e[].a,b,c,d,e,你点继续录入,遍历div的html,然后创建div.html(前一个.html()),然后再append.最后依次遍历div,中的input,把相应元素的.value加入当各自的数组里。不就OK了么。、 UserName: ag...

js中怎么共用头部尾部js尾部添加元素
答:header.php、footer.php、sidebar.php等文件一般都是“页面部分”模板文件,即:页眉、页脚、边栏。如果你能看懂英文,详细可参考官方文档:WordPress模板文件等级介绍(官方)WordPress获取主题目录里的文件和目录 HTML中怎么引用JS?在HTML中加入JavaScript脚本JavaScript采用的格式如下:把上述语句放在HTML的 与...

用js给select插入option
答://将option添加到select2、options.add //根据select查找对象, var obj=document.getElementById('mySelect'); //获取到id为'mySelect'的select元素//添加一个选项 obj.add(new Option("文本","值")); //添加select的options 这个只能在IE中有效 obj.options.add(new Option("text","value"...

原生js如何把复制的节点添加到元素里
答:可以用appendChild,innerHTML等实现。最常用的是appendChild,也就是给当前元素添加子元素,并且追加到最后。

js中如何向json数组添加元素
答:比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre。做法如下:var jsonObj={ 'param1':22,'param2' :33 };jsonObj. newParam ='pre';新的属性添加以后,json对象变成:var jsonObj={ 'param1':22,'param2' :33,'newParam':'pre'};...

asp.net js动态添加元素
答:既然是js ajax添加 取折中的办法 当点击评论后 前台js等待ajax的返回值 也就是说 你插入数据库的同时给出返回值是成功还是失败,如果成功,就不读数据库 直接静态追加dom节点 如果失败就弹出提示 这样 不会出现用户等待的现象 的确http请求和回发比较长 ...

请问如何使用js创建一个对像
答:以JS创建按钮为例:1、创建一个元素时,使用createElement()函数 2、设置元素属性可以有以下两种常用方式,首先获得具体元素的引用,a)然后使用elementName.id="";设置她的id属性,同样可以设置name等属性,具体针对不同的页面元素有不同的属性,可以参考DHTML参考手册 b)使用setAttribute函数,elementName....

救命,如何用js给div标签添加css属性,当鼠标事件发生的时候,譬如点击某...
答:需要准备的材料分别有:电脑、html编辑器、浏览器。1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。2、在index.html中的标签,输入js代码:$('div').click(function () {$(this).css('color', 'blue');});。3、浏览器运行index.html页面,此时点击123所在的div,...

怎样进行JS内DOM节点使用
答:这次给大家带来怎样进行JS内DOM节点使用,JS内DOM节点使用的注意事项有哪些,下面就是实战案例,一起来看一下。DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带...

能否用一句代码将页面中全部的id设置为元素?如何将页面中所有id选中...
答:不过你可以自己写个JS通用方法,如:function elementById(id){ return document.getElementById(id);} 这样你想用哪个元素只要写 elementById(“元素ID”),这样就可以了。当然觉得方法名太长了,你也可以写 function e(id) {...},这样每次改写成 e(“元素ID”),不知道是否能够帮到你。呵呵 ...