2021-04-28

一、createComment()方法

       定义和用法：createComment() 方法可创建注释节点。

        语法：document.createComment(text)

 

<p id="demo">单击按钮HTML文档添加一个注释</p>
		<button onclick="myFunc()">点我</button>
		<script>
			function myFunc(){
//				var c=document.createComment("你好呀！！！");
//				document.body.appendChild(c);
				var x = document.getElementById("demo");
				x.innerHTML = "呃呃呃"
			}
		</script>

 

二、createDocumentFragment() 方法

         定义和用法： createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。

                                 当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

                                 你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点

         语法：document.createDocumentFragment()

 

<!--当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。 -->
		<ul><li>java</li><li>html</li></ul>
		<p id="demo">单击按钮更改列表项，使用createDocumentFragment方法，然后在列表的最后一个孩子添加列表项。</p>
		<button onclick="myFunc()">点我</button>
		<script>
			function myFunc(){
				var d = document.createDocumentFragment();
				d.appendChild(document.getElementsByTagName("LI")[0]);
				//children找的标签元素节点，childNode找的是全部子节点 包含文本节点 ，
				//childnodes返回的是散列表，类似数组的存在，要通过下标来取值
				d.childNodes[0].childNodes[0].nodeValue = "js";
				document.getElementsByTagName("UL")[0].appendChild(d);
				
			}
			
		</script>

三、createElement() 方法

         定义和用法：createElement() 方法通过指定名称创建一个元素

         语法：document.createElement(nodename)

 

<!--createElement() 方法通过指定名称创建一个元素-->
	<p id="demo">单击按钮创建button元素</p>
	<p id="box">单击按钮创建有文本的按钮</p>
	<button onclick="myFunc()">点我</button>
	<button onclick="myFunction()">点击</button>
	<script>
		function myFunc(){
			var b= document.createElement("BUTTON");
			document.body.appendChild(b);
		}
		function myFunction(){
			var btn=document.createElement("BUTTON");
			var t=document.createTextNode("CLICK ME");
			btn.appendChild(t);
			document.body.appendChild(btn);
		}
	</script>

 

四、createTextNode() 方法

        定义和用法：createTextNode() 可创建文本节点。

        语法：document.createTextNode(text)

<p id="demo">单击按钮创建文本节点。</p>
		<p id="box">单击按钮创建一个标题</p>
		<button onclick="myFunc()">点击</button>
		<button onclick="myFunction()">点我</button>
		<script>
			function myFunc(){
				var t=document.createTextNode("Hello World");
				document.body.appendChild(t);
			}
			function myFunction(){
				var h = document.createElement("h1");
				var t = document.createTextNode("Hello World");
				h.appendChild(t);
				document.body.appendChild(h);
			}
		</script>