HTML DOM 07 创建节点

示例 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>

示例 3 :

创建属性节点

首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div

<html>
<div id="d">Hello HTML DOM<br></div>
 
<script>
function add(){
  
  var a=document.createElement("a");
  var content = document.createTextNode("http://12306.com");
  a.appendChild(content);
 
  var href = document.createAttribute("href");
  href.nodeValue="http://12306.com";
  a.setAttributeNode(href);
 
  var div1 = document.getElementById("d");
  div1.appendChild(a);
}
</script>
   
<button onclick="add()">在div中追加一个超链</button>
   
</html>

HTML DOM 07 创建节点

创建元素节点

创建文本节点

创建属性节点

猜你喜欢