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
  • 12782

JavaScript 添加或删除子节点、子元素

增加子节点或子元素时,首先要创建该元素(元素节点),然后向已经存在的元素节点添加,示例如下: 这是一个段落 这是另一个段落 var para=document.createElement("...
  • fanxiangru999
  • fanxiangru999
  • 2017年05月11日 15:09
  • 821

JS插入节点的方法appendChild、insertBefore

html 1 2 3 js function insert(){ var div2 =document.getElementById("div2");...
  • u011897392
  • u011897392
  • 2014年12月05日 12:54
  • 4311

js的DOM节点操作:创建 ,插入,删除,复制,查找节点

DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时,浏览器就会创建页面的...
  • Torrex
  • Torrex
  • 2017年01月12日 11:50
  • 8045

JS(JavaScript)插入节点的方法appendChild与insertBefore

首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild) insertBefore() 方法:...
  • babybk
  • babybk
  • 2016年05月15日 15:27
  • 1319

jQuery_创建节点及插入节点

•创建节点:使用 jQuery 的工厂函数$(): $(html); 会根据传入的html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个jQuery对象返回. •注意: –动态...
  • fanpengfei0
  • fanpengfei0
  • 2017年01月09日 00:57
  • 4763

js创建新的节点

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

JS 添加新节点的几种方法

html> html lang="en"> head> meta charset="UTF-8"> title>JS 添加新节点的几种方法title> head> body> div ...
  • LEI2879223426
  • LEI2879223426
  • 2017年07月25日 21:38
  • 676

javascript给html添加结点操作

html页面中的内容一般都是事先编写好的,用浏览器打开页面的时候,直接加载到页面上面的。如果想在一个页面上有一些交互性的操作,这时候javascript就派上用场了。那如果想在展现好的html页面上动...
  • magi1201
  • magi1201
  • 2015年03月05日 06:56
  • 3716

document对象 动态的创建元素(节点)/添加元素(节点)/删除元素(节点)

主要是tong'gu document示例 function test1(){ //创建元素 var myElement=document.createElement("a")...
  • hll174
  • hll174
  • 2014年10月02日 15:55
  • 4528
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript如何创建子节点
举报原因:
原因补充:

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