学习java经验_学习Java编程的第二十三天，分享一下学习经验

创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

创建节点

方法描述createElement()创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象createTextNode()创建一个文本节点，可以传入文本内容innerHTML也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法描述write()将任意的字符串插入到文档中appendChild()向元素中添加新的子节点，作为最后一个子节点insertBefore()向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：参考节点   需要参考父节点添加段落

function add(){

var container = document.getElementById('container')

var paragraph = document.createElement('p');

var txt = document.createTextNode('hello')

paragraph.appendChild(txt)

container.appendChild(paragraph)

}

添加 "段落、图片、文本框、选项"

添加段落

添加图片

添加文本框

添加选项

你心内的一首歌

南山南

喜欢你

---

// 添加p节点

function addPara(){

// 获取容器

var container =document.getElementById("container");

// 创建段落

var p =document.createElement('p');

// 第一种方式

// 创建文本节点

var txt=document.createTextNode("以后的你会感谢现在努力的你");

// 将txt节点追加到p节点中

p.appendChild(txt);

// 将p节点追加到container节点中

container.appendChild(p);

/*

// 第二种方式

// 向p节点中添加内容

p.innerHTML = "以后的你会感谢现在努力的你";

// 将p节点追加到container节点中

container.appendChild(p);

*/

/*

// 第三种方式

// 将字符串类型的p标签内容添加到container中，不会添加多次

var str = "

以后的你会感谢现在努力的你

";

container.innerHTML = str;

*/

}

// 添加图片

function addImg(){

// 创建图片

var img = document.createElement("img") ;

/*

// 设置属性第一种方式

// 设置img标签的src属性

// img.src ="http://www.baidu.com/img/bd_logo1.png";

*/

// 设置属性第二种方式

// setAttribute() 方法添加指定的属性，并为其赋指定的值。

// 设置img的src属性

img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');

img.style.width = '300px';

img.style.height = '200px';

// 获取容器

var container =document.getElementById("container");

// 将img节点追加到container中。

container.appendChild(img);

}

// 添加文本框

function addTxt(){

// 创建文本框

var txt =document.createElement("input");

/*

// 设置类型第一种方式

txt.type = "text";

txt.value = "添加成功";

*/

// 设置类型第二种方式

txt.setAttribute('type', 'text');

txt.setAttribute('value', '添加成功');

/*

* txt.type = 'password'

* txt.value = '123'

*/

// 获取容器

var container =document.getElementById("container");

// 将txt节点追加到container中。

container.appendChild(txt);

}

// 添加下拉框的选项

function addOptions(){

// 第一种方式

/*

// 创建下拉项

var option = document.createElement("option") ;

option.value = "2" ;

option.text = "油菜花" ;

// 获取下拉框

var sel = document.getElementsByTagName("select")[0];

// 添加 下拉项

sel.appendChild(option);

*/

// 第二种方式:

var option = document.createElement("option") ;

option.value = "2" ;

option.text = "不该" ;

// 获取下拉框

var sel = document.getElementsByTagName("select")[0];

// 添加下拉项

sel.options.add(option);

// 第三种方式: 添加下拉项

var sel = document.getElementsByTagName("select")[0];

sel.innerHTML += "英雄" ;

}

间接查找节点

方法|属性描述childNodes返回元素的一个子节点的数组firstChild返回元素的第一个子节点lastChild返回元素的最后一个子节点nextSibling返回元素的下一个兄弟节点parentNode返回元素的父节点previousSibling返回元素的上一个兄弟节点

删除节点

方法|属性描述removeChild()从元素中移除子节点

function delNode(){

var programmer =document.getElementById("programmer");

// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象

programmer.parentNode.removeChild(programmer);

}

程序猿

删除