创建节点学习

任务要求

<html>
<head><title>创建节点</title></head>
<body>
       <input type="submit" value="add" onclick="add();">
       <ul>
              <li>111</li>
              <li>222</li>
              <li>333</li>
       </ul>
</body>
</html>

如上代码,再添加一个li标签,内容为444即:<li>444</li>

创建节点思路

  1. 使用document.createElement去创建一个标签节点。
  2. 然后为其添加一个父节点
  3. 再创建一个文本节点,即标签内的值
  4. 将值拉到子节点

实例代码

<html>
<head><title>创建节点</title></head>
<script>
	function add(){
		var li = document.createElement(‘li‘);//创建一个li标签节点
		var text = document.createTextNode(‘444‘);//创建一个文本节点内容为444
		document.getElementsByTagName(‘ul‘)[0].appendChild(li);//让li标签成为ul标签的儿子。注:添加子标签的时候是没有引号的。
		li.appendChild(text);//把内容节点添加到li标签当中,即444添加到<li></li>中间
	}
</script>
<body>
	<input type="submit" value="add" onclick="add();">

  

时间: 2024-10-12 04:23:07

创建节点学习的相关文章

jQuery_DOM学习之------创建节点及节点属性

DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元素节点: $("<div></div>"): 创建文本节点: $("<div>直接将文本的内容添加进去</div>"): 创建节点并给节点添加属性:var div = $("<div class='righ

查找结点,创建节点,插入节点

1.查找节点介绍 2.创建节点 3.插入节点 4.程序(查找,并操作属性与文本节点) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="jquery-3.2.1.m

如何在Drupal7中用代码批量创建节点、评论和分类

最近,我忙于一个网站迁移工作.网站是使用某个老式CMS建立的,有一定数量的文章.不同的分类数据和用户评论.我的团队被雇来把这些数据从这个浪费人力物力的老式CMS上完整的迁移到功能更现代的开源Drupal7上.我喜欢干这一类事儿,帮别人拜托封闭专利技术永远是一种快乐.为完成这个任务,我需要通过代码在Drupal7中批量创建节点.评论和分类.这在Drupal 6的版本上只是小菜一碟,但Drupal7核心中引入了entities和fields的概念,所以现在开发起来需要有一点变化. 现在,我贴出这篇文

5、层次关系访问节点和创建节点

层次关系访问节点和创建节点 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta htt

Javascript 笔记与总结(2-10)删除节点,创建节点

[删除节点] 步骤: ① 找到对象 ② 找到他的父对象 parentObj ③ parentObj.removeChild(子对象); [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 300px; heigh

js创建节点及其属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建节点及其属性</title></head><style> #listShow>li ul{ display: none; } #listShow>li>a{ background:#ccc; } li{ list-s

Zookeeper客户端API之创建节点(七)

本篇博客主要讲一下使用Zookeeper原生的客户API来创建一个数据节点. 创建数据节点方法 Zookeeper提供了两个创建数据节点的方法. 同步创建数据节点方法: public String create(final String path, byte data[], List<ACL> acl, CreateMode createMode) throws KeeperException, InterruptedException 异步创建数据节点方法: public void crea

4.层次访问节点和创建节点

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

JQuery_DOM 节点操作之创建节点、插入节点

一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ var box = $('<div id="box">节点</div>')