如何实现1. JavaScript DOM练习基本功能: 1) HTML初始页面如图1. 2) 在如图1的左边框内,的具体操作步骤

原创

mob649e8168f1bb 2023-07-11 05:51:23 ©著作权

文章标签 javascript 按钮点击事件 HTML 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8168f1bb的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript DOM练习 - 实现基本功能

1. 整体流程

为了实现所需的功能，我们需要按照以下步骤进行操作：

步骤	描述
1	创建一个 HTML 文件，建立起基本的页面结构和样式
2	在左边框内添加一个按钮，用于触发事件
3	在点击按钮时，在右边框内创建一个新的元素
4	设置新元素的样式和内容
5	将新元素添加到右边框内

2. 代码实现

现在我们来逐步实现以上步骤所需要的代码。

步骤1：创建 HTML 文件

首先，我们需要创建一个 HTML 文件，并建立起基本的页面结构和样式。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript DOM练习</title>
    <style>
        .container {
            display: flex;
        }
        .left {
            width: 50%;
            border: 1px solid #ccc;
        }
        .right {
            width: 50%;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

步骤2：添加按钮

在左边框内添加一个按钮，用于触发事件。

// 获取左边框元素
const leftBox = document.querySelector('.left');

// 创建按钮元素
const button = document.createElement('button');
button.textContent = '点击我';

// 将按钮添加到左边框
leftBox.appendChild(button);

步骤3：创建新的元素

在点击按钮时，在右边框内创建一个新的元素。

// 获取按钮元素
const button = document.querySelector('button');

// 监听按钮点击事件
button.addEventListener('click', function() {
    // 创建新的元素
    const newElement = document.createElement('div');
    
    // 将新元素添加到右边框
    const rightBox = document.querySelector('.right');
    rightBox.appendChild(newElement);
});

步骤4：设置新元素的样式和内容

为了更直观地看到效果，我们将设置新元素的样式和内容。

// 获取按钮元素
const button = document.querySelector('button');

// 监听按钮点击事件
button.addEventListener('click', function() {
    // 创建新的元素
    const newElement = document.createElement('div');
    
    // 设置新元素的样式和内容
    newElement.style.width = '100px';
    newElement.style.height = '100px';
    newElement.style.backgroundColor = 'red';
    newElement.textContent = '新元素';
    
    // 将新元素添加到右边框
    const rightBox = document.querySelector('.right');
    rightBox.appendChild(newElement);
});

步骤5：将新元素添加到右边框内

最后，我们需要将新元素添加到右边框内。

// 获取按钮元素
const button = document.querySelector('button');

// 监听按钮点击事件
button.addEventListener('click', function() {
    // 创建新的元素
    const newElement = document.createElement('div');
    
    // 设置新元素的样式和内容
    newElement.style.width = '100px';
    newElement.style.height = '100px';
    newElement.style.backgroundColor = 'red';
    newElement.textContent = '新元素';
    
    // 将新元素添加到右边框
    const rightBox = document.querySelector('.right');
    rightBox.appendChild(newElement);
});