WEB前端

js动态创建div并为其添加文本内容

位置:首页 > WEB前端 > js教程,2019-08-08 10:07
实际应用中,可能需要根据实际需要js动态的创建一个div,设置其中的文本内容。下面简单介绍一下如何实现此功能。最初的html代码:<body> &l
实际应用中,可能需要根据实际需要js动态的创建一个div,设置其中的文本内容。

下面简单介绍一下如何实现此功能。
最初的html代码:
<body> 
<div id="box"></div>
</body> 
</html>
要在上面的div中动态的添加一个新的div,并且新div中有指定的文本。
代码实例如下:
var odiv=document.createElement("div"); 
var text=document.createTextNode("IT技术学习的网站!电脑、手机、编程开发学习的IT技术网站!www.ablanxue.com"); 
odiv.appendChild(text)
以上代码创建了一个div节点和文本节点,然后将文本节点添加到div节点中去。
下面就是最终代码:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>js创建div节点和文本节点</title> 
<script type="text/javascript">  
var odiv=document.createElement("div"); 
var text=document.createTextNode("IT技术学习的网站!电脑、手机、编程开发学习的IT技术网站!www.ablanxue.com"); 
odiv.appendChild(text); 
window.onload=function(){
  var box=document.getElementById("box");
  box.appendChild(odiv);
}
</script>  
<body> 
<div id="box"></div>
</body> 
</html>
以上代码是完整的版本,非常的简单,这里就不多介绍了。

TAGS:js动态创建div

猜你喜欢

NewHot