appendChild（）和insertBefore（）创建<li>

最新推荐文章于 2023-01-04 10:55:01 发布
最新推荐文章于 2023-01-04 10:55:01 发布
阅读量421 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luohui2017/article/details/79273506
版权 
<script type="text/javascript">
window.οnlοad=function ()
{
 	var oBtn=document.getElementById('btn1');
	var oTxt=document.getElementById('txt1');
	var oUl=document.getElementById('ul1');
	
	oBtn.οnclick=function()
	{
		var oLi=document.createElement('li');
		var aLi=document.getElementsByTagName('li');
		
		oLi.innerHTML=oTxt.value;
		if(aLi.length==0)//ul中没有li，需要先添加子节点
		{
			oUl.appendChild(oLi);
		}
		else
		{
			oUl.insertBefore(oLi,aLi[0]);
		}
		
	}

 }
</script>
</head>

<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
	

</ul>
</body>
  • appendChild()接收一个参数，为创建之后的<li>  名称
  • childBefore()接收两个参数，为创建之后的<li>  名称和插入在第几个<li>之前的位置。
注意：当<ul>中 无<li>时，需要先用appendChild()给原来的li添加子节点后才能在新创建的li之前添加元素。

luohui2017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现动态添加新元素、删除元素方法
10-17
主要介绍了原生js实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
appendChild() 或 insertBefore()使用与区别介绍
09-04
appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点，下面为大家介绍下具体的使用，感兴趣的朋友不要错过
appendChild() 方法和insertBefore() 方法的不同
u012794845的专栏
11-18 728
appendChild() 方法在节点的子节点列表末添加新的子节点。 　　insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
丿灬安之若死
02-22 3144
场景 单击按钮将项目从一个列表移动到另一个列表中 提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。 你可以使用 appendChild() 方法移除元素到另外一个元素。 实例 转移某个列...
appendChild()和insertBefore()方法插入元素的区别
jinzhuming0308的博客
03-11 4773
做图片库的时候使用到了这两个不同的命令； insertBefore：在您指定的已有子节点之前插入新的子节点； 其详细用法为 node.insertBefore(newnode,existingnode) getId(“box”).insertBefore(getClass (“myimg”)[3],getId(“myimg”)) 在id为box的元素的里面插入class为myimg的第三个
appendChild(newnode)
乌龟不背壳
12-21 568
appendChild(newnode) 在指定节点的最后一个子节点列表之后添加一个新的子节点 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&l
html appendchild()
dkwokaonima的博客
09-18 612
appendchild()方法是使用範例 var node = document.createElement("LI"); // Create a <li> node var textnode = document.createTextNode("Water"); // Create a text node node.appendChil...
JS 利用appendChild对<li>标签进行排序
u010114513的博客
03-18 2977
按照从大到小排序appendChild: 假设父级a中已经有子节点b，那么a.appendChild(b)的作用是：1.先将子节点b从父级a中删除；2.再将子节点b添加到a中，放在最末尾。<body> <button id="bt1">提交</button> <ul id="ul1"> <li>32</li> <li>243</li>
JavaScript中的appendChild（）方法
热门推荐
每天学习一点点
12-01 8万+
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 实例一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt
[js高手之路] dom常用API详解与应用
weixin_33969116的博客
08-23 251
本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用 一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最...
javascript 插入节点appendChild()
景上 的博客
07-01 3520
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点。语法: appendChild(newnode) 参数: newnode：指定追加的节点。在script标签内，为ul添加一个li，设置li内容为PHP。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/h
关于createElement、appendChild和insertBefore的用法
haoxiang110的专栏
03-30 1071
无标题页
js中appendChild()方法
优雅的博客
11-24 3万+
appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。      ① 创建原来没有的节点 苹果 香蕉 橘子 window.onload = function(){ //定义一个快捷方式 function $(name){ return
insertBefore()使用
weixin_33955681的博客
05-17 300
2019独角兽企业重金招聘Python工程师标准>>> ...
appendChild()方法
qq_42507521的博客
01-04 831
appendChild()方法是向节点添加最后一个子节点，也可以使用此方法从一个元素向另一个元素移动元素。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。例二：左右select中元素可以左右移动。例一：向ul中添加li项。
appendChild 函数
liuyj_vv的博客
10-10 4392
appendChild() 方法向节点添加最后一个子节点。 appendChild() 方法从一个元素向另一个元素中移动元素。 <body> <button onclick="test1()">test1</button> <button onclick="test2()">test2</button> <butt...
appendChild()的定义和用法
TTTiaotiao的博客
08-03 4521
appendChild() 方法向节点添加最后一个子节点。 提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。 您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 ...
appendchild介绍
chjshan55的专栏
08-29 1480
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!我想各位在很多网站上都看到过类似的效果!1、先用document.createElement方法创建一个input元素！ 程序代码var newInput = document.createElement("input");2、设定相关属性，如name,type等 程序代码newInput.type
java appendchild_详解javascript appendChild()的完整功能
weixin_42355252的博客
02-13 434
appendChild()常用功能。平时我们用appendChild的时候，都是向父级上添加子元素appendChild的另一个功能是，先把元素从原有父级上删掉，然后添加元素到新的父级。(移除再添加)。代码说明appendChild的第二种功能window.onload=function(){var oUl1=document.getElementById("ul1");var oUl2=docu...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href= "message.css"> </head> <body> <div> <h1>留言板</h1> <ul></ul> <textarea placeholder="请编辑你的留言"></textarea> <button class="sub">发布</button> </div> <script> //获取元素 var btn = document.querySelector('.sub'); var text = document.queryselector('textarea'); var ul = document .querySelector('ul'); btn.onclick = function () { if (text.value == '') { alert('你没有输入内容'); return false; } else { //建立li元素节点 var li = document.createElement('li'); li.innerHTML = text.value; var button = document.createElement('button'); button.className ='remove'; button.innerHTML ='删除'; button.onclick = function (){ ul.removeChild(this.parentNode); }; li.appendChild(button); //在ul元素中添加节点 ul. insertBefore(li,ul.children[0]); //将文本城中的内容清空 text. value =''; } }; </script> </body> </html>检查代码，试问其中的链接"message.css"内应该写入如何才能实现单击“发布按钮发表留言的功能。 实现删除留言功能
最新发布
06-01
"message.css"应该是样式文件，与单击“发布”按钮发表留言的功能没有关系。为了实现单击“发布”按钮发表留言的功能... ul.insertBefore(li, ul.children[0]); //清空文本框 text.value = ''; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值