创建节点元素

最新推荐文章于 2023-04-24 11:21:47 发布
最新推荐文章于 2023-04-24 11:21:47 发布
阅读量244 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yecats/article/details/51611002
版权 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>动态创建节点元素</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
	body{
		font-size:13px;
	}
	ul{
		padding:0px;
		list-style:none;
	}
	ul li{
		line-height:2.0em;
	}
	.divL{
		float:left;
		width:200px;
		background-color:#eee;
		border:solid 1px #666;
		margin:5px;
		padding:0px 8px 0px 8px;
	}
	.divR{
		float:left;
		width:200px;
		display:none;
		border:solid 1px #ccc;
		margin:5px;
		padding:0px 8px 0px 8px;
	}
	.txt{
		border:#666 1px solid;
		padding:2px;
		width:120px;
	}
	.btn{
		border:red 1px solid;
		padding:2px;
		width:60px;
		filter:progid:DXImageTransform.Mocrisoft.gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);
	}

 </style>
 
 <script type="text/javascript">
	$(function(){
		$("#Button1").click(function(){
			var str1 = $("#select1").val();
			var str2 = $("#text1").val();
			var str3 = $("#select2").val();
			var str4 = $("#text2").val();
			var div = $("<"+str1+" "+str3+"='"+str4+"'>"+str2+"</"+str1+">");
			$(".divR").show().append(div);
		});
	});

 </script>
 <body>
  <div class="divL"><p></p>
	<ul>
		<li>元素名：
			<select name="" id="select1">
				<option value="p">p</option>
				<option value="div">div</option>
			</select>
		</li>
		<li>内容为：
			<input type="text" id="text1" class="txt" />
		</li>
		<li>属性名：
			<select name="" id="select2">
				<option value="title">title</option>
			</select>
		</li>
		<li>属性值：
			<input type="text" id="text2" class="txt" />
		</li>
		<li style="text-align:center;padding-top:5px;">
			<input id="Button1" type="button" value="创建" class="btn" />
		</li>
	</ul>
  
  </div>
  <div class="divR"></div>
 </body>
</html>

yecats
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js创建元素（节点）示例
10-26
本文为大家介绍下使用js是如何创建元素（节点）的，感兴趣的朋友不要错过
创建元素节点createElement
qq_23337175的博客
08-01 1万+
  createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。 我们来创建一个按钮，代码如下： &l...
节点的创建、添加、删除
m0_63679126的博客
03-13 2207
节点的创建、添加、删除
节点创建删除、元素属性设置获取、节点属性
最新发布
weixin_43641912的博客
04-24 387
c.insertBefore(a,b)插入,在父级c节点下的子节点b之前插入a,Node.prototype。appendChild()增加子节点，动态的增加节点和动态的剪切节点在Node.prototype上。在原型上写一个，寻找兄弟元素节点的方法，为正找之后 ，为负数，之前的第N个，为0 找自己。父节点.removeChild(子节点)只是从dom树上删除，这个值还保存在内存中。在原型上写一个遍历父元素的子元素节点的方法。在原型上写一个找出一个元素的第N层父元素。写一个子元素逆序的方法。
创建元素（节点）
三人行，必有我师焉。
01-01 880
jquery2              //创建节点         var addItems = function() {             document.getElementById("div1").innerHTML = "";             var value = parseInt(document.getElementById('itemsNumber')
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 1895
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
jQuery简单创建节点的方法
10-21
主要介绍了jQuery简单创建节点的方法,涉及jQuery获取节点及append添加元素创建节点的相关技巧,需要的朋友可以参考下
jQuery动态创建元素以及追加节点的实现方法
10-21
下面小编就为大家带来一篇jQuery动态创建元素以及追加节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JQuery创建DOM节点的方法
10-24
主要介绍了JQuery创建DOM节点的方法,实例分析了jQuery创建元素结点、文本结点、属性结点的相关技巧,需要的朋友可以参考下
节点操作之创建和添加节点
weixin_67110633的博客
02-02 2498
document.createElement() 方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需要动态生成的，所有也称之为。node.appendchild（）方法将一个节点添加到指定父节点的子节点列表。node.insertBefore（）方法将一个节点添加到父节点的指定节点。2.node.insertBefore（child，指定元素），类似于css里面的before伪元素。，类似于css里面的after伪元素。
jQuery创建元素节点
bakelFF的博客
12-28 2856
在 jQuery 中，我们可以采用字符串的形式来创建一个元素节点，再通过 append( )、before( ) 等方法把这个字符串插入到现有的元素节点中。 语法： /方式1 var str = "字符串"; $().append(str); //方式2 $().append("字符串") append( ) 方法表示把一个新元素插入到父元素内部的子元素的“末尾”。 举例：创建简单元素 <!DOCTYPE html> <html> <head> <
总结一下jQuery操作元素节点的方法（创建、选择、插入节点）
热门推荐
xinghuo0007的博客
05-08 1万+
知识点一：创建节点注意：Jquery创建元素节点、属性节点、文本节点都使用$(html)1.创建元素节点：$("<li></li>"); 2.创建属性节点：$("<li id='test'></li>"); 3.创建文本节点：$("hello world !"); 4.下面是创建三者的结合：$("<li id='test'>hello world !</li>"); 解释：4是创建一个id属性为te
怎么创建html元素节点,怎么用DOM创建a节点
weixin_29526313的博客
06-23 398
JS嘛霸哥你如果想看效果，应该先创建一个基本页面类似html>文档标题接下来要做的选择嵌入页面的js还是在控制台中输出(引用外部文件也可以)选择好之后这样搞，首先以**.html (**你可以自己命名)保存创建的基本页面，用浏览器打开它接下来就是JavaScript的阶段了//要把大象装进冰箱的三步//一、做一个冰箱varbody=document.getElementsByTag...
js之DOM操作（创建元素节点createElement）
web前端菜鸟工程师
09-21 6021
创建元素节点createElement createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
DOM创建元素、属性、文本节点
lost_wen的博客
02-13 1824
var form = document.createElement('table'); //创建元素节点 var att=document.createAttribute("id"); //创建属性节点 att.value="prop"; form.setAttributeNode(att); var td1 = document.createElement('td'); v
Web前端学习笔记——JavaScript之事件、创建元素、节点操作
唯恋殊雨的博客
09-24 761
事件 事件：触发-响应机制 Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。 事件三要素 事件源:触发(被)事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用 var box = document.getElementById('box'); box.oncli...
JavaScript--DOM创建元素节点createElement
weixin_30532759的博客
07-29 303
创建元素节点createElement createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。 ...
创建元素节点的使用方法
logobitch的博客
07-23 1517
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 我们来创建一个按钮，代码如下： var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "创

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值