JS中创建节点和插入节点

1、JS中添加段落的三种方式

第一种方式：通过createTextNode 来添加段落文本

function addP() {
				// 第一种方式
				
				var p = document.createElement("p");
				var txt = document.createTextNode("将来的你会感谢现在奋斗的自己");
				p.appendChild(txt);
				document.getElementById("container").appendChild(p);
			}

第二种方式：通过innerHTML来添加文本

function addP() {
				// 第二种方式
				var container = document.getElementById("container");
				var p = document.createElement("p");
				p.innerHTML = "未来的你会感谢现在拼命的自己";
				container.appendChild(p);
			}

第三种方式：

function addP() {
				// 第三种方式
				 var container = document.getElementById("container");
				var str = "<p>未来的你会感谢现在拼命的自己</p>";
				container.innerHTML = str;
			}

JS添加图片的三种方式

第一种方式：用.style进行设置属性

function addImg() {
				var img = document.createElement("img");
				img.src = "img/Daniel_Wu.jpg";
				img.style.width = "300px";
				img.style.height = "200px";
				var container = document.getElementById("container");
				container.appendChild(img);
			}

第二种方式：（用setAttribute进行设置属性）

function addImg() {
				var img = document.createElement("img");
				img.setAttribute('src','img/Daniel_Wu.jpg');
				img.setAttribute('style','width: 300px ;height: 200px;');
				var container = document.getElementById("container");
				container.appendChild(img);
			}

第三种方式：（用innerHTML进行添加）

function addImg() {
				document.getElementById("container").innerHTML="<img src='img/Daniel_Wu.jpg' width='200px' height='300px'/>";
				
			}

JS中添加文本框的三种方式

第一种：（通过createElement创建）

function addText() {
				var txt = document.createElement("input");
				txt.type = "text";
				txt.value = "新增文本框";
				var container = document.getElementsByTagName("div")[0];
				container.appendChild(txt);
			}

第二种：通过setAttribute进行设置属性

function addText() {
				var txt = document.createElement("input");
				txt.setAttribute("type","text");
				txt.setAttribute("value","这是新的文本框");
				var container = document.getElementsByClassName("container")[0];
				container.appendChild(txt);
			}

第三种：通过innerHTML进行创建

function addText() {
				document.getElementsByClassName("container")[0].innerHTML = "<input type = 'text' value='这是新新文本框' >";
			}

JS添加option选项框的三种方法

1、通过.的方式进行设置属性

function addOptions() {
				var opt = document.createElement("option");
				opt.value = "3";
				opt.text = "来自天堂的魔鬼";
				var music = document.getElementsByName("music")[0];
				music.appendChild(opt);
			}

2、通过.options.add的方法进行添加

function addOptions() {
				var opt = document.createElement("option");
				opt.value = "4";
				opt.text = "泡沫啊啊啊";
				var music = document.getElementsByName("music")[0];
				music.options.add(opt);
			}

3、通过innerHTML的方法进行添加，注意是 options是 += 而不是 =

function addOptions() {
				document.getElementsByName("music")[0].innerHTML += "<option value = '5' > 我是你爹 </option>";
				
			}