// 使用原生JavaScript循环渲染多个元素
function renderElements(parentSelector, elementTag, elementAttributes, count) {
const parentElement = document.querySelector(parentSelector);
for (let i = 0; i < count; i++) {
const element = document.createElement(elementTag);
Object.keys(elementAttributes).forEach(key => {
element.setAttribute(key, elementAttributes[key]);
});
parentElement.appendChild(element);
}
}
// 使用jQuery循环渲染多个元素
function renderElementsWithJQuery(parentSelector, elementTag, elementAttributes, count) {
const $parentElement = $(parentSelector);
for (let i = 0; i < count; i++) {
const $element = $(`<${elementTag}></${elementTag}>`).attr(elementAttributes);
$parentElement.append($element);
}
}
// 示例：使用这两个函数
// 假设我们要在id为'my-container'的元素内添加10个div，每个div有一个类名'my-class'和一些文本内容
// 使用JavaScript
renderElements('#my-container', 'div', { class: 'my-class' }, 10).forEach(el => {
el.textContent = 'Some content';
});
// 使用jQuery
renderElementsWithJQuery('#my-container', 'div', { class: 'my-class' }, 10).text('Some content');这个例子展示了如何使用原生JavaScript和jQuery来循环添加多个具有相同属性的元素到指定的父元素中。在原生JavaScript中，我们创建元素并设置其属性，然后将其添加到父元素中。在jQuery中，我们使用更简洁的语法来完成相同的操作。