分类： 编程

在网页开发中，动态修改列表内容是很常见的需求。比如实时添加待办事项、展示动态加载的数据等。如果不想依赖 jQuery 这类第三方库，通过原生 JavaScript 也能轻松实现。下面通过基础代码和扩展案例，演示如何用纯 JS 操作 DOM 动态插入列表项。

基础实现代码

var li = document.createElement("li");
li.appendChild(document.createTextNode("li里的文字"));              
document.getElementById('ul_id').appendChild(li);

代码拆解

1. createElement
   创建 <li> 元素，类似准备一个空容器。
2. createTextNode + appendChild
   先创建文本节点再插入到 li，比直接写 innerHTML 更安全（避免 XSS 攻击风险）。
3. getElementById 定位父元素
   通过 ul 的 id 找到目标列表，用 appendChild 将 li 添加为最后一个子元素。

实际应用场景

<!-- 示例：点击按钮动态添加列表项 -->
<ul id="todoList">
  <li>第一项任务</li>
</ul>
<button onclick="addItem()">添加新任务</button>

<script>
function addItem() {
  var li = document.createElement("li");
  li.textContent = "新增任务" + Date.now(); // 更简洁的文本写入方式
  document.getElementById('todoList').appendChild(li);
}
</script>

在现代网页开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛应用于实现异步请求，以便无需重新加载页面即可更新内容。下面我们展示如何用纯 JavaScript 实现 AJAX 请求。

1. 基本的 AJAX 请求

//language:js
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

在这个例子中，我们创建了一个新的 XMLHttpRequest 对象，并通过 open 方法指定请求类型（GET）、请求的 URL（”ajax_info.txt”）以及是否异步（true）。当请求成功完成后，onload 事件会被触发，响应的内容会被显示在页面上的 demo 元素中。

2. 发送表单数据并响应

如果我们需要发送表单数据，可以使用 FormData 对象，它会自动处理表单中的所有数据。

//language:js
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    let response = JSON.parse(this.responseText);
    if (response.code == 0) {
        alert('留言成功');
    } else {
        alert(response.msg);
    }                
}
xhttp.open("POST", "post-message.php", true);

var guestBookForm = document.getElementById("guestBookForm");
var formData = new FormData(guestBookForm);

xhttp.send(formData);

在这个例子中，我们发送一个 POST 请求到 post-message.php，并通过 FormData 对象封装了表单中的数据。当 PHP 处理完请求后，返回一个 JSON 格式的响应，JavaScript 会根据返回的 code 来判断留言是否成功。

3. PHP 处理代码

以下是对应的 PHP 处理代码：

//language:php
<?php
include 'db.php';

$guestName = $_POST['guestName'];
$message = $_POST['message'];

if (empty($guestName)) {
    echo json_encode(['code' => -1, 'msg' => '昵称不能为空']);
    exit();
}

if (empty($message)) {
    echo json_encode(['code' => -1, 'msg' => '留言内容不能为空']);
    exit();
}

// 进一步的处理，如存入数据库等
?>

在 PHP 端，我们检查了用户提交的 guestName 和 message 是否为空。如果为空，则返回相应的错误信息。

4. 自定义 FormData

如果需要手动构建 FormData，例如在动态生成数据时，可以这样做：

//language:js
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    let response = JSON.parse(this.responseText);                                
}
xhttp.open("POST", "pay.php", true);

var formData = new FormData();
formData.append("id", id);
formData.append("unitPrice", unitPrice);
formData.append("count", P[i]);

xhttp.send(formData);

通过这种方式，你可以灵活地向服务器发送任何自定义的数据。

在 JavaScript 中，我们可以使用 hasOwnProperty 方法来判断某个对象是否拥有指定的属性。这个方法可以帮助我们区分对象本身的属性和从原型链继承的属性。

1. 使用 hasOwnProperty 方法

hasOwnProperty 是 Object.prototype 上的方法，它不会检查原型链，因此它是最可靠的方式来判断对象自身是否包含某个属性。

示例代码：

const obj = {
    name: "张三",
    age: 25
};

console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("age"));  // true
console.log(obj.hasOwnProperty("gender")); // false

2. in 运算符

in 运算符可以用于检查对象及其原型链上是否存在某个属性。

示例代码：

const obj = {
    name: "李四"
};

console.log("name" in obj);  // true
console.log("toString" in obj); // true，因为 `toString` 是 Object.prototype 上的方法

3. Object.hasOwn（ES2022 新增）

在 ES2022 中，JavaScript 引入了 Object.hasOwn，它是 hasOwnProperty 的更安全替代方法。

示例代码：

const obj = {
    city: "北京"
};

console.log(Object.hasOwn(obj, "city")); // true
console.log(Object.hasOwn(obj, "country")); // false

4. 何时使用哪种方法？

• hasOwnProperty：适用于检查对象自身是否拥有某个属性，避免检查原型链上的属性。
• in 运算符：如果想要检查某个属性是否存在于对象或其原型链上，可以使用 in。
• Object.hasOwn：如果环境支持 ES2022，建议使用 Object.hasOwn，因为它不会被 hasOwnProperty 可能被覆盖的问题影响。

5. 注意事项

如果某个对象的 hasOwnProperty 方法被覆盖，调用 Object.prototype.hasOwnProperty.call(obj, key) 仍然可以检查属性：

const obj = {
    hasOwnProperty: function() {
        return false;
    },
    id: 1001
};

console.log(obj.hasOwnProperty("id")); // false（被覆盖）
console.log(Object.prototype.hasOwnProperty.call(obj, "id")); // true

6. 结论

在 JavaScript 中，判断对象是否具有某个属性的方法有多种，通常推荐使用 hasOwnProperty 或 Object.hasOwn 进行安全检查。对于特殊情况，可以结合 in 运算符或者 Object.prototype.hasOwnProperty.call 来确保可靠性。

希望这篇文章对你有所帮助！

在实际开发中，我们经常需要将 JavaScript 数组的值提交到表单中。本文介绍如何将一个 JS 数组 selectedTextArray 赋值给表单中的隐藏字段，以便在提交时传输到服务器。

1. HTML 结构

我们使用一个 ID 为 form 的表单，并在 onclick 事件中调用 update() 方法来动态添加隐藏字段。

<form class="form-horizontal" id="form" action="/role-permission/update/{{ $role->id }}" method="post">
    @csrf
    <div class="box-body">                  
        <div class="form-group">
            <div class="col-sm-12">
                <div id="tree"></div>
            </div>
        </div>         
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary pull-right" onclick="return update();">保存</button>
    </div>
</form>

2. JavaScript 代码

在 update() 方法中，我们遍历 selectedTextArray 数组，并动态创建 input 隐藏字段，将其添加到表单中。

function update() {
    // 假设 selectedTextArray 是一个已有的数组
    let selectedTextArray = ["read", "write", "execute"]; // 示例数据
    
    let form = document.getElementById("form");
    
    // 清除已有的隐藏字段，避免重复提交
    document.querySelectorAll("input[name='permissions_array[]']").forEach(el => el.remove());
    
    // 遍历数组并创建隐藏字段
    for (let i = 0; i < selectedTextArray.length; i++) {
        let item = document.createElement("input");
        item.type = "hidden";
        item.name = "permissions_array[]";
        item.value = selectedTextArray[i];  
        form.appendChild(item);
    }

    return true; // 允许表单提交
}

3. 关键点解析

• item.name = "permissions_array[]"; 这一行代码的作用是确保数据以数组的形式提交到服务器。
• document.querySelectorAll("input[name='permissions_array[]']").forEach(el => el.remove()); 这行代码确保每次点击提交按钮时都会清除先前的隐藏字段，避免重复数据。
• 通过 appendChild(item); 将新创建的隐藏 input 字段添加到表单中。

4. 提交到服务器的示例数据

假设 selectedTextArray 包含 ["read", "write", "execute"]，提交后服务器接收到的数据格式如下：

{
    "permissions_array": ["read", "write", "execute"]
}

5. 结论

通过 JavaScript，我们可以动态地为表单添加隐藏字段，并将数组数据以正确的格式提交到服务器。这样可以方便地传输多选数据，如权限管理、标签选择等场景。