js 动态添加元素(div、li、img等)及设置属性的方法

以下是关于js动态添加元素及设置属性的方法的完整攻略：

使用createElement方法创建新元素

使用createElement方法可以在JavaScript中创建一个新的元素节点。该方法需要传入参数表示要创建的元素类型，例如“div”、“img”等。创建完元素后，可以使用appendChild方法将其添加到页面中。

// 创建一个新的div元素
const newDiv = document.createElement('div');
// 设置div元素的id属性
newDiv.id = 'myDiv';
// 设置div元素的内容
newDiv.innerHTML = '我是新的div元素';
// 将div元素添加到body中
document.body.appendChild(newDiv);

使用innerHTML方法插入HTML代码

在JavaScript中，还可以使用innerHTML方法来插入HTML代码。该方法需要传入参数表示要插入的HTML代码。使用innerHTML方法可以在一个元素内插入多个子元素，也可以修改元素的文本内容。

// 查找到要插入HTML代码的元素
const targetElement = document.querySelector('#target');
// 插入HTML代码
targetElement.innerHTML = '<h1>我是新的h1元素</h1><p>我是新的p元素</p>';

动态设置元素属性

通过JavaScript还可以动态修改已有元素的属性。要修改元素的属性，可以使用setAttribute方法，该方法有两个参数，第一个参数表示要修改的属性名称，第二个参数表示要设置的属性值。

// 查找到要修改属性的img元素
const imgElement = document.querySelector('img');
// 修改img元素的src属性
imgElement.setAttribute('src', 'https://example.com/image.jpg');
// 修改img元素的alt属性
imgElement.setAttribute('alt', '图片描述');

可以在以上示例中适当调整代码中的元素类型及属性，实现更多细节和特效。

希望以上攻略能帮到你，如有疑问请随时联系我。