js使用insertAdjacentElement往目标节点第一个位置插入dom
时间: 2023-07-20 07:11:57 浏览: 59
可以使用以下代码将DOM元素插入到目标节点的第一个位置:
```javascript
// 获取目标节点
const targetNode = document.getElementById('target');
// 创建新的DOM元素
const newElement = document.createElement('div');
newElement.textContent = '这是新的DOM元素';
// 将新的DOM元素插入到目标节点的第一个位置
targetNode.insertAdjacentElement('afterbegin', newElement);
```
在上面的代码中,`insertAdjacentElement`方法的第一个参数是用于指定插入位置的位置字符串,可以是以下四个值之一:
- `beforebegin`:在目标节点之前插入DOM元素
- `afterbegin`:在目标节点内部的第一个子节点之前插入DOM元素
- `beforeend`:在目标节点内部的最后一个子节点之后插入DOM元素
- `afterend`:在目标节点之后插入DOM元素
第二个参数是要插入的DOM元素。
相关问题
js 给ul特定位置添加li
您可以使用JavaScript的insertAdjacentHTML方法将li元素添加到ul的特定位置。
下面是一个示例代码:
```javascript
// 获取ul元素
var ul = document.getElementById('myList');
// 创建新的li元素
var newLi = document.createElement('li');
newLi.textContent = 'New Item';
// 在ul的第一个位置之前插入新的li元素
ul.insertAdjacentElement('afterbegin', newLi);
```
在上面的示例中,我们首先获取了具有id为"myList"的ul元素。然后,我们创建了一个新的li元素并设置其内容为"New Item"。最后,我们使用insertAdjacentElement方法将新的li元素插入到ul的第一个位置之前。
您可以根据需要调整代码中的元素选择器和插入位置。
input 插入元素
可以使用insertAdjacentElement方法在input元素后面插入一个新的元素。但是在Firefox浏览器中,需要使用textContent代替innerText。如果在Firefox中使用innerText,会报错。如果想要在Firefox中实现插入元素,可以使用如下代码:
```
var nod=document.createElement("span");
nod.textContent="ok!";
if(document.getElementById("ss").nextSibling){
document.getElementById("ss").parentNode.insertBefore(nod, document.getElementById("ss").nextSibling);
}else{
document.getElementById("ss").parentNode.appendChild(nod);
}
```
这段代码首先创建一个新的span元素,然后设置其textContent为"ok!"。接着判断input元素的下一个兄弟节点是否为空,如果为空,则将新元素添加到input元素的父节点的末尾;如果不为空,则将新元素插入到input元素的下一个兄弟节点之前。