利用DOM添加标签的两种方法自叙

最新推荐文章于 2024-08-17 10:24:46 发布

龍龍哥

最新推荐文章于 2024-08-17 10:24:46 发布

阅读量652

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/baldicoot_/article/details/102569828

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在网页中我们经常会遇见这样的情况，在一份表单的下面会有创建按钮，当用户点击后，会自动在表格或者文本框下面再生成一份原样空表格。在这里插入图片描述
方法一：我们先创建文本框，再利于insertAdjacentHTML属性，把文本框加在后面。创造onclick事件，当点击按钮完成这一系列操作。

function dianji(){
			var tag = "<p> <input type='text' /></p>";
			document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
		}

方法一：我们先利于createElement属性创建标签，然后用setAttribute给他自定义属性，再配合appendChild属性把文本框加在后面。创造onclick事件，当点击按钮完成这一系列操作。（可以给他自定义属性）

function dianji2(){
			var tag = document.createElement('input');
			tag.setAttribute('type','text');
			tag.style.fontSize="40px";
			tag.style.color="red";

			var p = document.createElement('p');
			p.appendChild(tag);
			document.getElementById('i1').appendChild(p);
		}