javascript如何创建子节点

原创 2016年08月30日 22:31:48

学习完HTML+css后,我并没有直接去学习HTML5和css3,而是开始学习JavaScript,现在就是jQuery基础也懂一点,js也懂一点,css3也懂得那么点。但是给我的感受就是不精通熟练,于是咬咬牙开始从心开始学起了JavaScript,这才是最基础最有用的吧

今天要讲的就是如何通过原生JavaScript来创建子节点(以ul添加子节点li为例)

如何在城市列表中后添加一个城市名称天津??这就是我要说的知识!

创建子节点步骤:

一:创建子节点li并取名

二:为子节点添加属性(id,value)

三:创建文本节点

四:将文本节点添加到子节点中

五:获取子节点的父节点,这里指的是ul;

六:将自己点添加到父节点中

这样,添加创建一个节点就完成了!

代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	您喜欢的城市:<br>
	<ul id="city">
		<li id="bj" value="beijing">北京</li>
		<li id="sh" value="shanghai">上海</li>
		<li id="cq" value="chongqing">重庆</li>
	</ul>
	<button id="btn">增加子节点</button>
	<script type="text/javascript">
		// 增加城市节点“天津"
		// 创建元素节点--设置属性--创建文本节点--在li上增加文本几点--获取ul节点--增加li节点
		window.onload=function(){
		document.getElementById('btn').onclick=function(){
		
		var liElement=document.createElement('li');
		liElement.setAttribute('id','tj');
		liElement.setAttribute('value','tianjing');
		var liText=document.createTextNode('天津');
		liElement.appendChild(liText);

		document.getElementById('city').appendChild(liElement);
		}
		}
	</script>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS原生追加子节点

var fragment = document.createDocumentFragment(); li = document.createElement('li'); li.className = ...
  • kai_l
  • kai_l
  • 2016年03月17日 14:39
  • 11632

JS插入节点的方法appendChild、insertBefore

html 1 2 3 js function insert(){ var div2 =document.getElementById("div2");...

js创建新的节点

首先说说js创建节点: createElement() 创建一个元素节点   createTextNode() 创建一个文本节点  用法: var element = document.cre...
  • rt2016
  • rt2016
  • 2017年02月17日 11:57
  • 1430

js动态添加节点到兄弟节点

function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (...

JavaScript动态增加节点和删除节点

其实HTML就是类似于XML,曾经W3C希望使用XML替代HTML,这就是说明,HTML和XML还是有一定的共同特点 的,所以说,对于XML,我们有解析和动态增加或者减少节点的功能,这个如果用在HT...

js点击删除最后一个元素节点

这里是昵称 这里是未读信息条数 function remo(obj){ var test = obj.getElementsByClassName('test')[0]; ...
  • Yiright
  • Yiright
  • 2016年12月22日 20:40
  • 3337

JS获取页面所有元素并统计每个标签的个数

var tags = document.getElementsByTagName('*'); var tagsArr = []; function countTag(){ for ...
  • TomBody
  • TomBody
  • 2017年03月18日 17:50
  • 2588

浏览器出现Cannot set property 'onclick' of null的问题

当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误,是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到onclick绑定的...
  • sadmoom
  • sadmoom
  • 2016年05月17日 23:17
  • 8538

js动态删除div元素

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成。用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示。所以考虑到用js来搞...

原生 js 操作dom的方法(创建节点和操作节点的几种方法)

document.createElement("p");//创建新节点 documen.create
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript如何创建子节点
举报原因:
原因补充:

(最多只允许输入30个字)