当前位置：首页 > JavaScript

js动态实现

2026-03-13 22:04:53JavaScript

动态创建HTML元素

使用document.createElement()方法创建新元素，再通过appendChild()或insertBefore()将其添加到DOM中：

const newDiv = document.createElement('div');
newDiv.textContent = '动态创建的div';
document.body.appendChild(newDiv);

动态修改元素属性

通过直接设置DOM元素的属性或使用setAttribute()方法：

const img = document.querySelector('img');
img.src = 'new-image.jpg';
img.setAttribute('alt', '新图片描述');

动态加载脚本

创建script元素并设置其src属性来实现动态脚本加载：

const script = document.createElement('script');
script.src = 'external-script.js';
script.async = true;
document.head.appendChild(script);

动态样式操作

通过修改元素的style属性或切换CSS类名来改变样式：

const element = document.getElementById('target');
element.style.color = 'red';
element.classList.add('active');

动态事件绑定

使用addEventListener方法实现事件监听：

const button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('按钮被点击');
});

动态数据渲染

结合模板字符串动态生成HTML内容：

const data = { name: '张三', age: 25 };
const container = document.getElementById('container');
container.innerHTML = `
    <div class="user-card">
        <h3>${data.name}</h3>
        <p>年龄: ${data.age}岁</p>
    </div>
`;

动态组件加载

利用现代前端框架的动态导入功能实现按需加载：

// React示例
const DynamicComponent = React.lazy(() => import('./DynamicComponent'));

// Vue示例
const AsyncComponent = () => ({
    component: import('./AsyncComponent.vue'),
    loading: LoadingComponent,
    error: ErrorComponent
});

动态表单处理

实时监听表单变化并处理数据：

const form = document.querySelector('form');
form.addEventListener('input', (event) => {
    const formData = new FormData(form);
    console.log(Object.fromEntries(formData));
});

动态路由处理

在单页应用中实现动态路由匹配：

// Vue Router示例
const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User }
    ]
});

// React Router示例
<Route path="/user/:id" component={User} />

动态数据请求

使用Fetch API或Axios实现动态数据获取：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        // 处理数据渲染
    });

动态动画实现

通过JavaScript控制CSS动画或使用动画API：

js动态实现

const box = document.querySelector('.box');
box.animate([
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
], {
    duration: 1000,
    iterations: Infinity
});