JavaScript动态更新元素内容：一个逐步教程-js教程-PHP中文网

JavaScript动态更新元素内容：一个逐步教程

心靈之曲

发布： 2025-10-12 13:48:32

原创

305人浏览过

javascript动态更新元素内容：一个逐步教程

本文详细讲解了如何使用 JavaScript 动态更新 HTML 元素的内容，重点是如何正确获取输入框的值并将其添加到新创建的元素中。同时，也介绍如何利用表单简化代码，以及如何使用 localStorage 持久化存储数据，并提供相应的代码示例和最佳实践。

动态更新元素内容的基础方法

核心问题在于如何正确获取输入框（input）的值，并将其动态添加到新创建的 HTML 元素中。以下是一个基础的实现方法：

<div class="msg">
    <div class="items"></div>
    <div class="input">
        <input type="text" class="name" placeholder="Name">
        <input type="text" class="message" placeholder="Message">
        <button id="button">Submit</button>
        <button type="reset">Reset</button>
    </div>
</div>

<script>
    const nameInput = document.querySelector('.name');
    const messageInput = document.querySelector('.message');
    const btn = document.getElementById('button');
    const div = document.querySelector('.items');

    btn.addEventListener('click', () => {
        let item = document.createElement('div');
        let inner = `
                <h3>${nameInput.value}</h3>
                <p>${messageInput.value}</p>
                `;
        item.className = "message-item";
        item.innerHTML = inner;
        div.append(item);

        // 清空输入框
        nameInput.value = '';
        messageInput.value = '';
    });
</script>

<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }

    .msg {
        padding: 2em;
        margin: 2em;
        border-radius: 2vh;
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: left;
        flex-direction: column;
        background-color: #1e90ff;
    }

    .items {
        height: 65vh;
        overflow: scroll;
        color: white;
        width: 100%;
        overflow-x: hidden;
        margin: 10px;
    }

    input {
        padding: 10px;
        border: none;
        border-radius: 8px;
        outline: none;
        font-size: 1em;
    }

    #button {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-size: 1em;
    }

    .button {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-size: 1em;
    }

    .message-item {
        background-color: black;
        padding: 1em;
        border-radius: 8px;
        margin: 3px;
    }
</style>

登录后复制

关键点：

获取元素引用： 使用 document.querySelector 获取输入框和容器元素的引用，确保获取的是元素本身，而不是元素的值。
获取输入值： 在 addEventListener 中，通过 .value 属性获取输入框的当前值。
创建和添加元素： 使用 document.createElement 创建新的 div 元素，并使用模板字符串将输入值插入到元素的 innerHTML 中。
清空输入框： 在添加元素后，将输入框的值设置为空字符串，以便用户可以输入新的内容。

使用表单简化代码

使用 HTML 表单可以更优雅地处理用户输入，并利用表单的内置功能，例如验证和重置。

立即学习“Java免费学习笔记（深入）”；

<div class="msg">
    <div class="items"></div>
    <form id="new-msg" autocomplete="off">
        <input type="text" name="name" placeholder="Name" required>
        <input type="text" name="message" placeholder="Message">
        <button type="submit" class="form-btn">Submit</button>
        <button type="reset" class="form-btn">Reset</button>
    </form>
</div>

<script>
    const handleAdd = (e) => {
        e.preventDefault(); // 阻止表单默认提交行为
        const form = e.target;
        const formElements = form.elements;
        const parent = form.closest('.msg');
        const items = parent.querySelector('.items');

        items.insertAdjacentHTML('beforeend', `
        <div class="message-item">
            <h3>${formElements.name.value}</h3>
            <p>${formElements.message.value}</p>
        </div>
        `);

        formElements.name.value = '';    // 清空 name
        formElements.message.value = ''; // 清空 message
        formElements.name.focus(); // 将焦点设置回 name 输入框
    };

    document.forms.namedItem('new-msg')
        .addEventListener('submit', handleAdd);
</script>

<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }

    .msg {
        padding: 2em;
        margin: 2em;
        border-radius: 2vh;
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: left;
        flex-direction: column;
        background-color: #1e90ff;
    }

    .items {
        height: 65vh;
        overflow: scroll;
        color: white;
        width: 100%;
        overflow-x: hidden;
        margin: 10px;
    }

    input {
        padding: 10px;
        border: none;
        border-radius: 8px;
        outline: none;
        font-size: 1em;
    }

    .form-btn {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-size: 1em;
    }

    .message-item {
        background-color: black;
        padding: 1em;
        border-radius: 8px;
        margin: 3px;
    }
</style>

登录后复制

优势：

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

2114

查看详情

e.preventDefault()： 阻止表单的默认提交行为，防止页面刷新。
form.elements： 可以通过 form.elements.name 直接访问表单中的元素，代码更简洁。
autocomplete="off"： 关闭浏览器的自动完成功能，避免干扰用户输入。
<button type="submit">： 使用 submit 类型的按钮可以触发表单的提交事件，同时支持键盘上的 Enter 键。
<input required>： 利用 HTML5 的 required 属性，可以进行简单的表单验证。
formElements.name.focus()： 提交后，将焦点设置回 name 输入框，提高用户体验。

使用 LocalStorage 持久化存储数据

如果需要保存用户输入的数据，可以使用 localStorage。以下是一个使用 localStorage 存储和检索消息的示例：

<div class="msg">
    <div class="items"></div>
    <form id="new-msg" autocomplete="off">
        <input type="text" name="name" placeholder="Name" required>
        <input type="text" name="message" placeholder="Message">
        <button type="submit" class="form-btn">Submit</button>
        <button type="reset" class="form-btn">Reset</button>
    </form>
</div>

<script>
    const MESSAGES_KEY = "messages";

    const main = () => {
        // 恢复所有消息
        const messageContainer = document.querySelector(".items");
        __retrieveAllMessages().forEach((message) => {
            insertMessage(message, messageContainer);
        });
        // 添加事件监听器
        document.forms.namedItem("new-msg").addEventListener("submit", handleAdd);
    };

    const saveMessage = (message) => {
        __saveAllMessages(__retrieveAllMessages().concat(message));
    };

    const insertMessage = (message, container) => {
        container.insertAdjacentHTML("beforeend", messageToHtml(message));
    };

    const messageToHtml = ({
        name,
        message
    }) => `
  <div class="message-item">
    <h3>${name}</h3>
    <p>${message}</p>
  </div>
`;

    const handleAdd = (e) => {
        e.preventDefault(); // 阻止页面导航
        const form = e.target,
            message = {
                name: form.elements.name.value,
                message: form.elements.message.value,
            };
        saveMessage(message);
        insertMessage(message, form.closest(".msg").querySelector(".items"));
        form.elements.name.value = ""; // 清除 name
        form.elements.message.value = ""; // 清除 message
        form.elements.name.focus();
    };

    const __retrieveAllMessages = () => {
        return JSON.parse(localStorage.getItem(MESSAGES_KEY) ?? "[]");
    };

    const __saveAllMessages = (messages = []) => {
        return localStorage.setItem(MESSAGES_KEY, JSON.stringify(messages));
    };

    main();
</script>

<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }

    .msg {
        padding: 2em;
        margin: 2em;
        border-radius: 2vh;
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: left;
        flex-direction: column;
        background-color: #1e90ff;
    }

    .items {
        height: 65vh;
        overflow: scroll;
        color: white;
        width: 100%;
        overflow-x: hidden;
        margin: 10px;
    }

    input {
        padding: 10px;
        border: none;
        border-radius: 8px;
        outline: none;
        font-size: 1em;
    }

    .form-btn {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-size: 1em;
    }

    .message-item {
        background-color: black;
        padding: 1em;
        border-radius: 8px;
        margin: 3px;
    }
</style>

登录后复制

关键点：

MESSAGES_KEY： 定义一个常量用于存储 localStorage 中的键名。
__retrieveAllMessages()： 从 localStorage 中检索所有消息，如果 localStorage 中没有数据，则返回一个空数组。
__saveAllMessages()： 将所有消息保存到 localStorage 中。
saveMessage()： 将新消息添加到现有的消息列表中，并保存到 localStorage 中。
insertMessage()： 将消息插入到 DOM 中。
main()： 在页面加载时，从 localStorage 中恢复所有消息，并添加到 DOM 中。

注意事项：

localStorage 存储的数据是字符串，因此需要使用 JSON.stringify() 将对象转换为字符串，并使用 JSON.parse() 将字符串转换为对象。
localStorage 存储的数据是永久性的，除非手动清除，否则数据会一直保存在浏览器中。
localStorage 存储的数据是同源的，只有相同域名、协议和端口的页面才能访问相同的数据。
localStorage 的存储容量有限，通常为 5MB 或 10MB，具体取决于浏览器。