通过js在HTML中改变元素

运用js在HTML中改变元素

比较常用的创建方法和增加方法:

createElement()                         创建元素节点对象
appendChild()                           以子节点的形式追加到指定节点中
createTextNode()                     创建文本节点
insertBefore(newNode,oldNode)                 在oldNode前插入newNode
setAttribute(属性,值)                         设置创建的标签的属性
具体实例

<script type="text/javascript">
    var main = document.body;
    //创建链接
    function createa(url,text)
    {
        var oA=document.createElement('a');
        oA.setAttribute('href',url);
       oA.style.color='red';
        oA.innerHTML=text;
        main.appendChild(oA);
    }
    // 调用函数创建链接
    createa('http://www.imooc.com','慕课网');
    
    </script> 

在这个例子中结果为一个链接到’http://www.imooc.com’网址的一个显示为慕课网的超链接。例子中运用
var oA=document.createElement(‘a’);创建一个标签a并赋给oA,使用setAttribute()方法设置了一个href的属性并给这个属性设置一个链接地址,最后用appendChild()方法把创建的oA追加到body标签的尾部。

	 	var oUl=document.getElementById('ul');
        var txt = document.createTextNode('段落');//创建文本
       	document.body.appendChild(txt);//在末尾添加文本
        document.body.insertBefore(txt, oUl);//在oUl前添加txt

createTextNode()方法创建一个文本节点存在内存中,先找到body下的ul标签;
insertBefore()方法则是在body中的ul前面把创建的文本节点给添加进去。

删除和替换方法

1)替换
repalceChild(newNode,oldNode) 新节点替换旧节点
2).删除节点
父节点.removeChild(自身)

 			<ul id="ul">
                <li>aaa<a href="javascript:void(0)">删除</a></li>
                <li>bbb<a href="javascript:void(0)">删除</a></li>
                <li>ccc<a href="javascript:void(0)">删除</a></li>
                <li>ddd<a href="javascript:void(0)">删除</a></li>
            </ul>
            <script>
               var oUl=document.getElementById('ul');
                var len=document.links.length;
                for(i=0;i<len;i++){
                    document.links[i].onclick=function(){
                        this.parentNode.parentNode.removeChild(this.parentNode);
                    }
                }
  				var oP=document.createElement('p');
                oP.innerHTML='新的字母 aaa';
                oUl.replaceChild(oP,oUl.firstChild.nextSibling);

先获取到ul的id,之后获取到超链接的个数,在运用for循环遍历每一个超链接,在每个超链接上面添加一个点击事件,当你点击第几个超链接的时候调用函数,函数中的this.parentNode.parentNode.removeChild(this.parentNode);这个语句是找到超链接的父节点的父节点再用removeChild方法删掉超链接的父节点也就是标签<li >,removeChild方法使用时需要在要删除的节点的父节点上进行。
创建一个新的p标签赋值给oP,并给它添加内容;运用replaceChild()方法替换指定元素; oUl.replaceChild(oP,oUl.firstChild.nextSibling);这个语句的意思是在父节点ul上把ul中的第一个子节点的下一个子节点给替换成新创建的p标签;

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值