javascript使用appendChild追加节点实例

148 阅读 0 评论 98 点赞

我是靠谱客的博主包容天空，最近开发中收集的这篇文章主要介绍javascript使用appendChild追加节点实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了javascript使用appendChild追加节点的方法。分享给大家供大家参考。具体分析如下：

DOM树节点的增加，实例代码如下：

复制代码代码如下:

<html>

<head>

<script type="text/javascript">

function t(){

 var nodep = document.createElement('p');//创建p节点

 var art = document.createTextNode('你好，世界');//创建文本节点

 var cont = document.getElementById('container');//获取节点

 cont.appendChild(nodep);//增加节点

 nodep.appendChild(art);//增加文本节点

}

</script>

<style type="text/css">

p{width:100px;height:100px;background:green;}

#container p{width:100px;height:100px;background:blue;}

</style>

</head>

<body>

<div id="container"><p>hello world</p>

</div>

<p>说两句吧</p>

<hr />

<button onclick="t()" value="">增加节点</button>

</body>

</html>