js 创建标签 追加标签

最新推荐文章于 2024-04-21 15:25:48 发布
最新推荐文章于 2024-04-21 15:25:48 发布
阅读量1.9w 收藏 18
点赞数 11
分类专栏： javaScript 文章标签： 创建标签 追加标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42599236/article/details/86618903
版权

适用于写评论，写博客等要创建和插入新的标签的地方

四个步骤：

1、创建标签

var tag=document.createElement( ' li ' );

2、添加标签内容 tag.innerHTML='内容'

 内容可以是标签加常量加变量：例如：list.innerHTML=' <li>'+name+‘你好！</lli>  ' 其中，name是获取到的名字的值。

清空标签内容：li.innerHTML= ' ';   此时的 li 标签仍然存在，但是他的子级都没了

<body>
    	姓名：<input type="text" id="user">
    	班级：<input type="text" id="cls">
    	<button id="add">新增</button>
    	<button id="remove1">删除</button>
    	<table id="tb">
    		<tr>
    			<td>选择</td>
    			<td>姓名</td>
    			<td>班级</td>
    			<td>删除</td>
    		</tr>
    	</table>
		
		
		<script type="text/javascript">
			add.onclick=function(){
//	方法2			var tag=document.createElement('tr');
				var x = tb.innerHTML;
				var name = user.value;
//				console.log(name)
				var text= cls.value;
//				console.log(text)
				if(name==''&&text==''){
					alert('请输入信息')
				}else {
					tb.innerHTML=x+'<tr><td><input type="checkbox" name="check"/></td><td>'+name+'</td><td>'+text+'</td><td>删除</td></tr>'
					user.value='';
					cls.value='';
				}				
			}
			remove1.onclick=function(){
				var check = document.getElementsByName('check');
				var	tr;
				var num;
				for (var i=0;i<check.length;i++){
					tr = document.getElementsByTagName('tr')
					if(check[i].checked==true){
//						有打钩
//				获取所有的tr
//				令该行的所有标签及内容为空是：tr[i+1].innerHTML="";清空了之后，仍然存在<tr><tr/>
//方法1:      tr[i+1].parentNode.parentNode.removeChild(tr[i+1].parentNode);
					tr[i+1].parentNode.parentNode.removeChild(tr[i+1].parentNode);
//	方法2 ：令tr 的父级的html内容为空	tr[i+1].parentNode.parentNode.innerHTML='';
//   删除了行,i发生了变化,否则删不了全部的
					i--;
					}
					
				}
			}
		</script>
	</body>

3、追加标签

方式1：a.parentNode.appendChild( tag);  追加在a的父级的最底部，而且 a 和 tag 都是同一个父级；

方式2：a.parentNode.insertBefore(tag , a); 追加在 a 的前面， a 和 tag 都是同一个父级；

4、获取 input 的值：例如：<input id='txt' value=''/>  var name = txt.value   

改变 input 标签文本的内容：txt.value='你好'； 

戒骄戒躁，似是而非
关注
  • 11
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js创建html标签
rugaxm的专栏
01-24 789
function createBtnHtml(obj,ids){ var row = obj.insertRow(obj.rows.length);  //行对象 var col;  //列对象 col = row.insertCell(0); row.setAttribute("id","btn_row"); col.setAttribute("colspan","8"); var
js 动态添加标签
janfly79的博客
10-10 952
js 动态添加标签，简单易懂
JS添加标签
weixin_30609331的博客
07-22 279
<script> function show(){ $('.add').unbind(); $('.low').unbind(); $('.add').click(function(){ // 加好; var html=$(this).c...
js插入html内容的方法
最新发布
qq_73746764的博客
04-21 540
2. afterBegin:插入到标签开始标记之后。在相应位置插入新的 HTML 内容，而不会破坏原有内容。1. beforeBegin: 插入到标签开始前。3. beforeEnd:插入到标签结束标记前。4. afterEnd:插入到标签结束标记后。不保留原来的节点内容，原有内容替换为新的内容。两个参数（"插入的位置",插入内容）追加一个新的元素，并保留原有内容。
js动态添加标签
wemoon2010的专栏
05-14 1313
var a1 = document.createElement("a"); //创建标签    //设置属性    a1.style.color="blue";     a1.innerText="google";     document.body.appendChild(a1); //添加到body 本来是要做个添加背景音乐到网页中去 但是无论动态js添加
用JS向页面插入标签
m0_54606980的博客
10-30 3258
/3.把标签div写入body中。//4.把标签div写入body中。//js在body中插入标签。//1.获取要插入的目的标签。//js在div中添加标签。//2.向标签中添加内容。//3.向标签中添加内容。//1.创建div标签。
在JS中，手动添加标签
蓝斑.json的博客
11-28 311
【代码】在JS中，手动添加标签。
js消息提示，输出HTMl标签追加到页面
12-15
在JavaScript编程中，"js消息提示，输出HTML标签追加到页面"是一个常见的需求，它涉及到用户界面交互和DOM操作。下面将详细讲解这个主题。 首先，JavaScript是一种强大的客户端脚本语言，常用于网页动态效果的实现...
jQuery动态创建元素以及追加节点的实现方法
10-21
在这个例子中，我们将`<a>`标签追加到`<ul>`元素的末尾： ```javascript $("ul").append(str); ``` jQuery中的追加节点操作与原生JavaScript有所不同。在原生JavaScript中，我们通常使用`appendChild()`和`...
jQuery动态添加li标签并添加属性和绑定事件方法
10-18
这样，`JSarray`的每个值都会被插入到一个新创建的`li`标签中，`id`属性根据数组索引自动生成。 **添加属性** 在jQuery中，可以使用`attr()`方法为HTML元素设置属性。在示例中，`attr()`方法被用来给每个新创建的`...
javascript使用appendChild追加节点实例
12-12
这个实例展示了`appendChild`在实际应用中的基本用法，它在JavaScript编程中尤其对于动态创建和更新页面内容至关重要。通过结合其他DOM操作方法，如`createElement`、`getTextNode`和`getElementById`，开发者能够...
jquery动态添加带有样式的HTML标签元素方法
10-18
`plusFile()`函数利用jQuery的`append()`方法将新的文件上传表单追加到`#otherFile`元素内。新添加的HTML元素包含一个文件输入字段和一个删除按钮，删除按钮同样带有`onclick`事件，调用`deleteCurrent(this)`函数：...
js添加新标签、重新加载js，css
houjx3的博客
12-18 7052
js 添加标签： 直接appendChild（字符串）也可以；（添加子标签appendChild（），添加标签append（）） var num=(num-1)*pgsize; var input_file = document.createElement("input"); input_file.setAttribute("type","hidden"); input_fil
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
逝者如风
07-02 9595
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" href="css/rest.css" /&g
php中 javascript 标签,纯js在指定标签里面或标签上方增加新标签
weixin_32312913的博客
04-02 1279
js虽然是人家用10天时间就开发出的语言，有比较多的漏洞，但不得不承认js是个很灵活和强大的语言。很多人习惯用jqeury，但是，我觉得用纯js的东西更加的好，减少了依赖而且更加的灵活。今天就总结一个js创建各类标签，并且将创建的标签放到指定的页面中任何位置的功能。一，创建标签，我们使用document.createElement();来创建，自定位置，我们用appendChild，对指定标签内部...
js 动态添加元素（div、li、img等）及设置属性
weixin_34049948的博客
02-02 729
把一串 html 标签赋给一个 javascript 变量，除属性的值要用转义的双引号外，某些时候字符串还很长，显得有些复杂。如果用 js 动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。 　　网页是由 html 标签一层层组成的，js 也可以动态添加一层层的诸如 div、li、img 这样的标签。其实，不管是什么 html 标签，js 动态创建的方法都差不多，接着就先...
如何用js(jq)给html元素标签前面或者后面增加一个元素标签
橙-极纪元-cplvfx-JJY.Cheng
07-09 1万+
after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用，利弊，BUG等做了深入说明
js增加标签（增加元素）和删除标签（删除元素）
热门推荐
weixin_44944193的博客
04-10 1万+
效果图：（我用的是框架，这里不分享样式） html代码： <!-- 增加时间段的设计 --> <div class="quantum"> <div class="layui-form-item"> <label class="layui-form...
JavaScript学习笔记——如何将JavaScript代码加入网页（＜script＞标签）
Insomnia_X的博客
07-10 3332
如何将JavaScript代码加入网页 如何将JavaScript代码加入网页？——使用<script>元素 HTML文件中包含众多元素，如<html>、<head>、<script>、<body>等 使用<script>标签将JavaScript代码添加到网页的<head>或<body>元素中 方法一：使用<script>将代码嵌入<head>元素中 这是常见的方式，能让代码更容易找到，
在ul后面追加li标签
06-08
可以使用JavaScript或jQuery来实现在ul后面追加li标签的操作，具体实现代码如下： JavaScript实现： ```javascript // 获取ul元素 var ul = document.querySelector("ul"); // 创建li元素 var li = document.createElement("li"); // 给li元素添加文本内容 li.textContent = "new item"; // 将li元素添加到ul的末尾 ul.appendChild(li); ``` jQuery实现： ```javascript // 获取ul元素 var ul = $("ul"); // 创建li元素并添加文本内容 var li = $("<li>new item</li>"); // 将li元素添加到ul的末尾 ul.append(li); ``` 以上代码中，我们首先获取到ul元素，然后创建一个新的li元素，并设置其文本内容为"new item"，最后将li元素添加到ul的末尾即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值