这篇文章主要介绍了 JS 如何动态增加删除 UL 节点 LI 及相关内容, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <ul id="ul">
- <li id=1>
- 11111111111111111
- <a href="javascript:del(1);">
- del
- </a>
- </li>
- <li id=2>
- 22222222222222222
- <a href="javascript:del(2);">
- del
- </a>
- </li>
- <li id=3>
- 33333333333333333
- <a href="javascript:del(3);">
- del
- </a>
- </li>
- <li id=4>
- 44444444444444444
- <a href="javascript:del(4);">
- del
- </a>
- </li>
- <li id=5>
- 55555555555555555
- <a href="javascript:del(5);">
- del
- </a>
- </li>
- </ul>
- <select name="car_type" id="car_type" onchange="add_car(this);">
- <option value="">
- please select
- </option>
- <option value="car_11">
- 11111
- </option>
- <option value="car_22">
- 22222
- </option>
- <option value="car_33">
- 33333
- </option>
- <option value="car_44">
- 44444
- </option>
- </select>
- <input type="text" id="ul_value" onclick="getulvalue();" name="ul_value"
- value="">
- <script>
- function $$(id) {
- var obj = document.getElementById(id);
- return obj;
- }
- function del(n) {
- $$('ul').removeChild($$(n));
- }
- function add(id, txt) {
- var ul = $$('ul');
- var li = document.createElement("li");
- var href_a = document.createElement("a");
- href_a.href = "javascript:del('" + id + "');";
- href_a.innerhtml = "del";
- li.innerHTML = txt;
- li.id = id;
- li.appendChild(href_a);
- ul.appendChild(li);
- }
- function add_car(obj) {
- //chk ul childNodes length
- if ($$('ul').childNodes.length < 3) {
- var flag = true;
- var ul_obj = $$('ul').childNodes;
- var car_id = obj.options[obj.selectedIndex].value;
- var txt = obj.options[obj.selectedIndex].text;
- if (car_id != null && car_id != "") {
- for (var i = 0; i < ul_obj.length; i++) {
- if (ul_obj[i].id == car_id) {
- alert("已经添加!");
- flag = false;
- }
- }
- if (flag) {
- add(car_id, txt);
- }
- }
- } else {
- alert("只允许加入三个值!");
- return;
- }
- }
- function getulvalue() {
- if ($$('ul').childNodes.length == 0) {
- alert("请选择相关内容!");
- return;
- } else {
- var txt = "";
- for (var i = 0; i < $$('ul').childNodes.length; i++) {
- txt += $$('ul').childNodes[i].id + ",";
- }
- $$("ul_value").value = txt;
- }
- }
- </script>
来源: