createElement的奇妙之处

circujoker_06 2016-11-25 11:01:57



<!DOCTYPE html>

<html>

	<body>

		<ul id="myList">

			<li>Coffee</li>

			<li>Tea</li>

		</ul>

		<p id="demo">请点击按钮向列表中添加项目。</p>

		<button onclick="myFunction()">亲自试一试</button>

		<script>

			function myFunction() {

				//代码片段一

				//var node = document.createElement("LI");

				//var textnode = document.createTextNode("Water");

				//node.appendChild(textnode);

				/*document.getElementById("myList").appendChild(node);*/

				//document.getElementsByTagName("UL")[0].appendChild(node);

				//上面这种就是不会删除原有的节点，只会在最后面添加相关的节点

				

				

				

				//代码片段二

				var textnode=document.getElementsByTagName("li")[0];

				/*console.log(textnode);

				debugger;*/

				document.getElementsByTagName("UL")[0].appendChild(textnode);

				//

			}

		</script>

		<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>



	</body>



</html>

为什么代码片段一是直接在末尾添加新的元素，而代码片段二中是会覆盖原有的元素的？也是说其执行的结果为tea coffee 而不是Coffee tea coffee

...全文

287 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

roffer 2016-11-25

打赏
举报

回复


var node = document.createElement("LI");

var textnode=document.getElementsByTagName("li")[0];

//换种方式来理解吧：node相当于 new 了一个对象,其引用地址是单独的，而下边的textnode引用的是同一个地址。
//也就是说复制一个原有的dom节点，插入到其他地方，之前的节点就会移除

天际的海浪 2016-11-25

打赏
举报

回复

因为appendChild（）是移动元素，不是复制。如果被移动的元素已经在页面，移动后原来的地方当然就没有了

new Function()奇妙之处先看new Function()输出结果 new Function() 是实例化一个对象，一个函数对象，即也是匿名函数。这就很有意思了，想想匿名函数出现的场景，DOM注册事件、定时器等等~~ 给DOM元素注册事件 DOM注册事件，可以看作DOM对象挂载一个属性，基于对象和属性的关系，有两种写法，用点运...

我的BLOG搬家到自己的站点了站点链接 RSS 在处理前面的文章中的级联菜单的时候，我发现了一个有意思的现象，使用CreateELement/InnerHTML/document.write的表现各自不一，自己测试了一下，呵呵，算得总结一下 1、CreateELement createElement生成一个动态对象，这个对象创建之后是个无主对象，没有加到创建它的doc...

要获取HTML文档中的元素，可以使用SelectNodes和SelectSingleNode方法。SelectNodes返回一个HtmlNodeCollection对象，其中包含与选择器匹配的所有节点。SelectSingleNode返回一个HtmlNode对象，表示匹配选择器的第一个节点。

前言对于任何一个C端产品，图片都是占比最大的内容之一，处理好图片不仅有利于网站的seo、性能，更能够提升用户的体验，带来可观的转化率。我们在日常编码遇到最多的一个图片问题就是：应该用img还是background？ Img标签 src属性：图片路径，必传；当然也可以不写，不写的时候会发生很奇妙的事情呢！打开“https://translate.google.cn/”，然后执行下面的代码 const img = document.createElement("img"); document.body.a

今天是周一，记一下周六加班的笔记。关于Vnode。有个大概的了解，链接： https://www.jianshu.com/p/c6f53c5c8a8a 感觉vnode就是为了减少dom操作诞生的，它是个javascript对象，所以才叫虚拟dom，因为不是在dom上进行操作。 https://zhuanlan.zhihu.com/p/29220175 （这是第一次明白什么是虚拟dom) 还有一个createElement。同理。其实我感觉vnode经常使用的时候就是在自定义指令v-的时候吧，然后自定义指

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章