JavaScript 动态创建div并为其添加文本

实际应用中，可能需要根据实际需要动态的创建一个div，设置其中的文本内容。

下面简单介绍一下如何实现此功能。

最初的html代码：

[ 其他 ] 运行代码下载代码

<script>
<body> 
<div id="box"></div>
</body> 
</html>
</script>

要在上面的div中动态的添加一个新的div，并且新div中有指定的文本。

代码实例如下：

[ 其他 ] 运行代码下载代码

<script>
var odiv=document.createElement("div"); 
var text=document.createTextNode("51前端欢迎您"); 
odiv.appendChild(text)
</script>

以上代码创建了一个div节点和文本节点，然后将文本节点添加到div节点中去。

下面就是最终代码:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>创建div节点和文本节点-51前端</title> 
<script type="text/javascript">  
var odiv=document.createElement("div"); 
var text=document.createTextNode("51前端欢迎您"); 
odiv.appendChild(text); 
window.onload=function(){
  var box=document.getElementById("box");
  box.appendChild(odiv);
}
</script>  
<body> 
<div id="box"></div>
</body> 
</html>

代码描述：JavaScript 动态创建div文本。JavaScript 动态创建div并为其添加文本

下载全部收藏

241 321

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册