以动态方式添加新元素的 JavaScript 代码

在 JavaScript 中，我们可以通过使用 DOM 操作来动态地增加、删除或修改页面元素。这是一个非常有用的技能，因为它允许我们在运行时根据用户交互或其他条件改变页面的外观和行为。

下面是一些以动态方式添加新元素的 JavaScript 代码。

在页面中创建新元素

你可以使用 createElement() 方法来创建新的 HTML 元素，并使用 appendChild() 方法将它们添加到页面中：

// 创建一个新的 <p> 元素，然后将其添加到页面中
var newElement = document.createElement('p');
var text = document.createTextNode('这是一个新的段落。');
newElement.appendChild(text);

var container = document.getElementById('container');
container.appendChild(newElement);

更改页面元素的属性

你可以使用 setAttribute() 方法来更改页面元素的属性：

// 更改 <img> 元素的 src 属性
var image = document.getElementById('myImage');
image.setAttribute('src', 'new-image.jpg');

复制和粘贴现有元素

你可以使用 cloneNode() 方法来复制现有元素，并使用 appendChild() 方法将其添加到页面中：

// 复制现有的 <p> 元素，并将其添加到页面中
var existingElement = document.getElementById('existingElement');
var newElement = existingElement.cloneNode(true);

var container = document.getElementById('container');
container.appendChild(newElement);

使用innerHTML来添加新元素

如果你想要添加一些新的 HTML 代码而不是单个元素，你可以将它们作为字符串存储在一个变量中，并使用 innerHTML 将它们添加到页面中：

// 添加一些新的 HTML 代码到页面中
var newHtml = '<div class="new-div"><h2>这是一个新的标题</h2><p>这是新的段落。</p></div>';

var container = document.getElementById('container');
container.innerHTML += newHtml;

这些是在 JavaScript 中以动态方式添加新元素的基本技巧，你可以根据自己的需求进行自由的扩展和实践。