HTML DOM 创建节点

关键字	简介	示例代码
createElement	创建元素节点	示例代码
createTextNode	创建文本节点	示例代码
createAttribute	创建属性节点	示例代码
	练习-动态创建一个表	示例代码
	答案-动态创建一个表	示例代码

示例 1 : 创建元素节点
 示例 2 : 创建文本节点
 示例 3 : 创建属性节点
 示例 4 :  练习-动态创建一个表
 示例 5 :  答案-动态创建一个表

示例 1 :

创建元素节点

提问

通过createElement 创建一个新的元素节点
接着把该元素节点，通过appendChild加入到另一个元素节点div1中

运行效果

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>
 
<button onclick="add()">在div中追加一个hr元素</button>
 
</html>

示例 2 :

创建文本节点

提问

首先创建一个元素节点p (p是p标签，不是随便命名的变量名)
接着通过createTextNode创建一个内容节点text
把text加入到p
再把p加入到div

运行效果

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
 
  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);
 
  var div1 = document.getElementById("d");
  div1.appendChild(p);
 
}
</script>
  
<button onclick="add()">在div中追加一个p元素</button>
  
</html>