在js中动态创建子元素p标签并绑定点击事件,将他添加到父元素div后,怎么获取父元素下其他兄弟元素的文本内容
时间: 2024-12-18 09:34:32 浏览: 11
jquery html动态添加的元素绑定事件详解
在JavaScript中,你可以通过以下步骤动态创建`<p>`标签、绑定点击事件,并将其添加到`<div>`父元素之后。同时,你想获取父元素下的其他兄弟元素的文本内容,可以使用`Element`对象的`nextElementSibling`属性来遍历。
```javascript
// 获取父元素
const parentDiv = document.getElementById('parent-div-id'); // 替换为你的实际ID
// 动态创建p标签
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是新创建的段落'; // 设置初始文本
// 绑定点击事件
newParagraph.addEventListener('click', function() {
console.log('点击了新的段落');
});
// 将p标签添加到父元素后
parentDiv.appendChild(newParagraph);
// 获取并显示其他兄弟元素的文本内容
function getBrotherTexts(element) {
let sibling;
while ((sibling = element.nextElementSibling)) {
console.log(sibling.textContent);
}
}
// 调用函数获取父元素下所有兄弟元素的文本
getBrotherTexts(parentDiv);
```
在这个例子中,当你点击新创建的`<p>`元素时,会打印出它后面的每个兄弟元素的文本。如果想获取的是父元素的所有直接子元素,可以直接修改`getElementById`和`nextElementSibling`部分。
阅读全文