dom操作添加文字节点代码实例

在实际应用中，可能会有这样的操作，那就是给指定的元素中添加一个元素，并且此元素中含有指定的文本内容，下面就通过代码实例介绍一下如何实现此效果，实现此效果的方式有多种，下面介绍一下比较常用的两种。

实现方式一:

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var oh=document.createElement("h1"); 
  var textNode=document.createTextNode("51前端"); 
  oh.appendChild(textNode); 
  var obox=document.getElementById("box"); 
  obox.appendChild(oh);
}
</script> 
<body> 
<div id="box"></div> 
</body> 
</html>

上面的代码实现了我们的要求，可以在div元素中添加一个h1元素并制定h1中的内容。

1.createElement()函数可以参阅js createElement()一章节。

2.createTextNode()函数可以参阅document.createTextNode()一章节。

实现方式二:

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var oh=document.createElement("h1"); 
  var obox=document.getElementById("box"); 
  obox.innerHTML="<h1>51前端</h1>"
}
</script> 
<body> 
<div id="box"></div> 
</body> 
</html>

代码描述：dom操作添加文字节点。dom操作添加文字节点代码实例

下载全部收藏

115 153

用户评论

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