【Python】python lxml给元素添加兄弟节点

azezeze

已于 2022-07-30 09:48:26 修改

阅读量1.2k

点赞数 1

分类专栏： python 文章标签： python css html

于 2022-07-30 09:44:07 首次发布

本文链接：https://blog.youkuaiyun.com/azezeze/article/details/126067996

版权

python 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了如何在HTML中为现有div元素添加一个后续的<div>元素，以解决CSS布局问题。通过实例展示了使用lxml.etree和ElementTree库的不同方法，包括直接附加、添加到父级以及利用addprevious和addnext函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给元素添加兄弟节点

有以下HTML标记

<div id="contents">
    <div id="content_nav">
        something goes here
    </div>
    <p>
        some contents
    </p>   
</div>

为了解决一些CSS问题，我想在div后面附加一个div标记<div style="clear:both"></div>，如下所示

<div id="contents">
    <div id="content_nav">
        something goes here
    </div>

    <div style="clear:both"></div>

    <p>
        some contents
    </p>   
</div>

是这样做的：

import lxml.etree

tree = lxml.etree.fromString(inputString, parser=lxml.etree.HTMLParser())

contentnav = tree.find(".//div[@id='content_nav']")
contentnav.append(lxml.etree.XML("<div style='clear: both'></div>"))

但这不会在div后面附加新的div，而是在div内部。

<div id="content_nav">
    something goes here
    <div style="clear:both"></div>
</div>

有没有办法在#content_nav的div的后面添加一个div？

解决办法一

使用addprevious和addnext来添加兄弟节点。

一个etree元素有两个方法：addprevious 和 addnext 。

import lxml.etree as ET

content='''\
<div id="contents">
    <div id="content_nav">
        something goes here
    </div>
    <p>
        some contents
    </p>   
</div>
'''
tree = ET.fromstring(content, parser=ET.HTMLParser())
contentnav = tree.find(".//div[@id='content_nav']")
contentnav.addnext(ET.XML("<div style='clear: both'></div>"))
print(ET.tostring(tree))

输出：

<html><body><div id="contents">
    <div id="content_nav">
        something goes here
    </div><div style="clear: both"/>
    <p>
        some contents
    </p>   
</div>
</body></html>

解决办法二

与其附加到contentnav，不如向上附加到父级（contentdiv）和insert在特定索引处的新div。要找到该索引，请使用contentdiv.index(contentnav)，它给出contentdiv中contentnav的索引。添加一个可以得到所需的索引。

import lxml.etree as ET

content='''\
<div id="contents">
    <div id="content_nav">
        something goes here
    </div>
    <p>
        some contents
    </p>   
</div>
'''
tree = ET.fromstring(content, parser=ET.HTMLParser())
contentnav = tree.find(".//div[@id='content_nav']")
contentdiv = contentnav.getparent()
contentdiv.insert(contentdiv.index(contentnav)+1,
                  ET.XML("<div style='clear: both'></div>"))
print(ET.tostring(tree))

输出：

<html><body><div id="contents">
    <div id="content_nav">
        something goes here
    </div>
    <div style="clear: both"/><p>
        some contents
    </p>   
</div></body></html>

解决办法三

在另一个元素后面插入一个元素：

def insert_after(element, new_element):
    parent = element.getparent()
    parent.insert(parent.index(element)+1, new_element)

它允许在现有的element之后插入一个new_element，使用：

insert_after(element, new_element)