迪丽热-BUG

No.3 操作DOM实现增删小实例

1.学习目标

  1. 获取或设置元素内容
  2. 在页面中添加元素
  3. 在页面中删除元素
  4. 判断是否为空，如果空就不执行
  5. 模版字符串的使用
  6. 委托绑定

2.学习资料

如何获取html中的元素呢？以下是重中之重必须牢记

JavaScript

var content = document.getElementById('a');//通过id来获取
var content = document.getElementsByClassName('a');//通过class名来获取
1
2

Jquery

$('#div');//通过id获取
$('.div');//通过classname获取
$('div');//通过全选标签获取
1
2
3

接下来如何设置和获取html中的内容呢？

JavaScript

var html = content.innerText();//这个是获取单文本
var html = content.innerHtml();//这个是连同标签一起获取
var html = content.value;//获取value
1
2
3

Jquery

var html = content.text();//这个是获取单文本
var html = content.html();//这个是连同标签一起获取
var html = content.val();//获取value值
content.append(html);//添加到content中
1
2
3
4

3.Jquery方式实现

html

<body>
    <div class="container">
        <div class="inputContent">
            <input type="text" id="todo-input" value="">
            <button id="add">添加</button>
        </div>
        <div class="content" id="todo-content">
            <div class="content-item">
                <p class="item-lt">test</p>
                <p class="item-del">X</p>
            </div>
        </div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Jquery

<script>
$('#add').click(function(e){
    var contentInput = $('#todo-input').val();
    var content = $('#todo-content');
    if(contentInput != ''){
        content.append(`
    <div class="content-item">
        <p class="item-lt">${contentInput}</p>
        <p class="item-del">X</p>
    </div>
    `)
    }
})

$('#todo-content').delegate('p','click',function(){
    var $handler = $(this).prop('class');
    console.log($handler)
    if ($handler=='item-del') {
        $(this).parent().remove();
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.javascript实现

var a = document.getElementById('todo-input');
var list = document.getElementsByClassName('content-item');
var add = document.getElementById('add');
var todolist = document.getElementById('todo-content');
console.log(todolist)
add.addEventListener('click',function(e){
    let content = a.value;
    if (content != '') {
        let todoItem = document.createElement('div');
        let todoLt = document.createElement('p');
        let todoDel = document.createElement('p');
        todoItem.setAttribute('class','content-item');
        todoLt.setAttribute('class','item-lt');
        todoDel.setAttribute('class','item-del');
        todoLt.innerText = content;
        todoDel.innerText = 'x';
        todoItem.appendChild(todoLt);
        todoItem.appendChild(todoDel);
        todolist.appendChild(todoItem);
        this.value = '';
    }
})

todolist.addEventListener('click',function(e){
    let click = e.target.className;
    let todoItem = e.target.parentNode;
    console.log(click)
    if (click == 'item-del') {
        todoItem.remove();
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

← NO.4 JavaScript中的数据类型 →