2.24-节点操作

桃扇骨 2023-07-10 15:59 33阅读 0赞

### 节点操作 ###

#### 1 创建元素 ####

var oDiv = document.createElement('div');

#### 2 添加元素到body末尾 ####

var oDiv = document.createElement('div');
    //元素插入到末尾
    document.body.appendChild(oDiv);

#### 3 任意位置插入元素 ####

var oDiv = document.createElement('div');
    //insertBefore() 在任意位置插入元素 第一个参数是需要插入的元素 第二个参数 是参照元素
    document.body.insertBefore(oDiv,document.body.children[0]);

#### 4 删除元素 ####

//创建一个元素
    var oDiv = document.createElement('div');
    document.body.appendChild(oDiv);
    //获取元素
    var btn = document.getElementById('btn');
    //点击元素删除
    btn.onclick = function() { 
        // 删除元素 父亲中删除指定儿子
        //document.body.removeChild(oDiv);
        //删除自己
        oDiv.remove();
    }

#### 5 元素克隆 ####

<div id="box">
            <img src="./star.gif" alt="">
        </div>
    
        <script> var box = document.querySelector('#box'); //var boxClone = box.cloneNode(); // 浅层复制，子元素未复制 var boxClone = box.cloneNode(true); // 深层复制 //将元素剪切到 body末尾 document.body.appendChild(boxClone); </script>

#### 6 文本节点 ####

文本节点多用innerHTML 插入元素

#### 7 文档碎片 ####

文档碎片 一块缓存 用于大量创建DOM元素

//创建文档碎片 
        var cache = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) { 
            var btn = document.createElement('input');
            btn.type = 'button';
            btn.value = '按钮';
            cache.appendChild(btn);
        }
    	//全部缓存完成，一次性打印
        document.body.appendChild(cache);

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关节点操作之删除节点

节点操作之删除节点 <!DOCTYPE html> <html lang="en"> <head> <meta char

蔚落/ 2023年10月03日 15:21/ 0 赞/ 73 阅读

相关 cs224n(CS224n作业代码)

cs里clutches是什么意思 clutches n. \[机\] 离合器；手抓；掌握(clutch的复数形式)我。。知。。道加。。我。。私。。聊 ![cs

我就是我/ 2023年09月26日 13:08/ 0 赞/ 102 阅读

相关 JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

节点操作创建节点 document.createElement('tagName') document.createElement()方法创建由tagN

喜欢ヅ旅行/ 2022年12月23日 06:13/ 0 赞/ 290 阅读

相关 LeetCode224. 基本计算器

实现一个基本的计算器来计算一个简单的字符串表达式 s 的值。示例 1：输入：s = "1 + 1" 输出：2 示例 2：

深藏阁楼爱情的钟/ 2022年11月07日 04:12/ 0 赞/ 211 阅读

相关 LeetCode224. 基本计算器

难度：`困难` 链接：[https://leetcode-cn.com/problems/basic-calculator][https_leetcode-cn.com_pr

柔光的暖阳◎/ 2022年11月07日 04:06/ 0 赞/ 159 阅读

相关 leetcode224

Basic Calculator 折腾了好一会儿，其实意思很简单。就是实现一个包含+，-法和括号运算的计算器。可能是没找对方法吧，看了网上的代码量，感觉我写的就是一坨屎啊

Love The Way You Lie/ 2022年08月09日 00:51/ 0 赞/ 174 阅读

相关 leetcode 224. Basic Calculator

Implement a basic calculator to evaluate a simple expression string. The expression str

女爷i/ 2022年07月28日 05:24/ 0 赞/ 215 阅读

相关 JavaScript 节点操作

1.创建节点 2.复制节点 3.插入节点 4.替换节点 5.移除节点 6.查找节点 1.创

àì夳堔傛蜴生んèń/ 2022年05月26日 02:44/ 0 赞/ 262 阅读

相关 jQuery_节点操作

一.内部插入节点 $('div').append(node); //在div内部的后面追加元素 node.appendTo($('div'));

向右看齐/ 2022年05月22日 12:24/ 0 赞/ 343 阅读

相关 L224

Astronomers have revealed details of mysterious signals emanating from a distant galaxy,

古城微笑少年丶/ 2021年12月23日 08:27/ 0 赞/ 172 阅读