zoukankan      html  css  js  c++  java
  • dom操作创建节点/插入节点

    <section>
    <div id="box" style="position: relative;">
    <p id="good">
    <span>第一个元素</span>
    <span id="span">
    <em id="em">我很好</em>
    </span>
    </p>
    </div>
    </section>
    一,创建节点
    // 1,创建元素节点

    let div = document.createElement('div');
    // 2,创建文本节点

    let text = document.createTextNode('你好,世界!');
    // 3,创建属性节点

    let attr = document.createAttribute('class');

    二,插入文本节点/元素节点
    // 1,appendChild:el2插入到el1元素的末尾
    // el1.appendChild(el2);

    // 2,insertBefore:将el插入到parentEl元素内,并且在childrenEl元素的前面(若dom中已存在el,则el将被移动到指定位置)
    // parentEl.insertBefore(el, childrenEl);

    // 3,innerText:插入文本节点(替换原值);当值为空时,表示清空当前元素内容
    // el.innerText = '你好啊,世界!';

    // 3,innerHTML:插入节点(替换原值),可解析值内标签;当值为空时,表示清空当前元素内容
    // el.innerHTML = '<span>你好啊,世界!</span>>';

    // 用法如下:
    attr.value = 'test';
    div.appendChild(text);
    div.setAttributeNode(attr);
    document.body.appendChild(div);
    document.getElementById('good').insertBefore(document.getElementById('em'), document.getElementById('span'));
    本人前端水平有限,写的知识点可能有谬误,欢迎留言指正,如果看到,我将第一时间回复。感谢支持!
  • 相关阅读:
    fixed 和 fixed
    SVN命令概要
    项目目录的划分
    作用域(scope), 定义空间(declaration space) 和 生存期(lifetime)
    可伸缩性最佳实践:来自eBay的经验(转)
    TCP连接可用性检测
    面向对象设计
    如何截取Http请求
    eBay架构
    .net3.5下的Socket通信框架
  • 原文地址:https://www.cnblogs.com/qddyh/p/10392000.html
Copyright © 2011-2022 走看看