DOM、jQuery和Vue基本实现元素节点内容的创建和添加
1.DOM操作
- 基本内容代码块
<div id="demo">
<label>Id:
<input type="text" id="ids" placeholder="Id">
</label>
<label>Name:
<input type="text" id="names" placeholder="name">
</label>
<!-- 绑定点击事件 -->
<input type="button" value="添加" id="btn" onclick="submitContent()">
<ul id="ullist">
<li>id:1,姓名:小1</li>
<li>id:2,姓名:小2</li>
<li>id:3,姓名:小3</li>
</ul>
</div>
DOM代码块
<script>
function submitContent() {
//获取input中的 id 值和 name 值
var ids = document.getElementById('ids').value;
var names = document.getElementById("names").value;
//首先创建一个 li 元素
var liNew = document.createElement("li");
//为 li 元素添加内容
var content = document.createTextNode("id:" + ids + ",姓名:" + names);
// 将文本节点加入到 li 元素中
liNew.appendChild(content);
// 查找已知的元素 ul 节点
var element = document.getElementById("ullist");
//在一个已知的元素中 ul 添加创建的元素节点
element.appendChild(liNew);
}
</script>
2.jQuery操作
- 基本内容代码块
<div id="demo">
<label>Id:
<input type="text" id="ids" placeholder="Id">
</label>
<label>Name:
<input type="text" id="names" placeholder="name">
</label>
<input type="button" value="添加" id="btn">
<ul id="ullist">
<li>id:1,姓名:小1</li>
<li>id:2,姓名:小2</li>
<li>id:3,姓名:小3</li>
</ul>
</div>
jQuery代码块
注意：此处要先写 lists 的内容,不然会报错 lists 未定义,因为jQuery是顺序执行代码
<!-- jQuery在线引用地址 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
//给按钮绑定点击事件
$('#btn').click(function () {
//要添加的内容
lists = "id:" + $('#ids').val() + ",姓名:" + $('#names').val();
//新创建一个 li 标签
var $liNew = $("<li>" + lists + "</li>");
//将新创建的 li 元素添加到 已经存在的 ul 中
$('#ullist').append($liNew);
});
});
</script>
3.Vue操作
- 基本内容代码块
<div id="demo">
<!-- 使用 v-model 将输入框内容和 data 内容进行双向数据绑定 -->
<label>Id:
<input type="text" placeholder="Id" id="Id" v-model="id">
</label>
<label>Name:
<input type="text" placeholder="姓名" id="name" v-model="name">
</label>
<!-- @click="" 添加点击事件 [v-on: 简写为: @] -->
<input type="button" value="添加" id="btn" @click="addContent">
<ul>
<!-- 利用插值表达式将data数据渲染到界面上 -->
<li v-for="item in list">id:{{ item.id }},姓名:{{ item.name }}</li>
</ul>
</div>
Vue代码块
<!-- Vue在线引用地址 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#demo',
data: {
id:'',
name:'',
list:[
{id:1,name:'小1'},
{id:2,name:'小2'},
{id:3,name:'小3'}
]
},
methods:{
//addContent:function(){} 简写
addContent(){
var info = {id:this.id,name:this.name};
this.list.push(info);
}
}
})
</script>
|