Javascript 在另一个元素旁边添加元素

有时候我们需要在一个元素的旁边添加一个新的元素，这在网页制作中非常常见。使用Javascript可以很方便地完成这个操作，我们来看一下怎么实现。

使用insertAdjacentHTML方法

insertAdjacentHTML方法可以在指定元素的相对位置插入指定HTML代码。我们可以使用该方法在目标元素的旁边添加一个新元素。

const targetElement = document.getElementById('target');
const newElement = `<div>我是新加的元素</div>`;

targetElement.insertAdjacentHTML('afterend', newElement);

在上面的代码中，我们首先获取了要插入元素的目标元素，然后定义了要插入的新元素的HTML代码。最后使用insertAdjacentHTML方法将新元素添加在目标元素的直接后面。

使用createElement和appendChild方法

还有一种方法是使用createElement和appendChild方法创建并添加新元素。该方法可以使我们更方便地控制新元素的属性和样式。

const targetElement = document.getElementById('target');
const newElement = document.createElement('div');
newElement.textContent = '我是新加的元素';

targetElement.parentNode.insertBefore(newElement, targetElement.nextSibling);

在上面的代码中，我们同样首先获取了目标元素，然后使用createElement方法创建新元素。使用textContent属性添加新元素的文本内容，最后使用appendChild方法将新元素添加到目标元素的直接后面。

结束语

以上两种方法都可以实现在另一个元素旁边添加元素的操作，具体使用哪种方法可以根据具体情况和需求进行选择。无论哪种方法，都需要熟练掌握DOM操作和Javascript语法。