[FIXED] BeautifulSoup Insert HTML data attribute

Issue

I am stuck trying to insert a new HTML tag in my soup but couldn't figure out how to proceed. The problem is that I would like the tag to have the attribute "data-toggle" but BeautifulSoup doesn't seem to handle this.

In [79]: tag = soup.new_tag("li")

In [80]: tag
Out[80]: <li></li>

In [81]: tag2 = soup.new_tag("a")

In [82]: tag.append(tag2)

In [83]: tag
Out[83]: <li><a></a></li>

---

In [89]: tag = soup.new_tag("li")

In [90]: tag2 = soup.new_tag("a",href="#")

In [91]: tag2 = soup.new_tag("a",data-toggle="pill")
  File "<ipython-input-91-554760df4122>", line 1
    tag2 = soup.new_tag("a",data-toggle="pill")
                           ^
SyntaxError: keyword can't be an expression

---

I have googled this error and ended up on a bs4 doc page (https://www.crummy.com/software/BeautifulSoup/bs4/doc/) which state that "Some attributes, like the data-* attributes in HTML 5, have names that can’t be used as the names of keyword arguments" and instead recommend to use attrs={"data-foo": "value"}. The point is that it does actually work with some methods (e.g.: find_all) but not with new_tag().

In [97]: tag2 = soup.new_tag("a",attrs={"data-toggle":"pill"}) 
In [98]: tag2
Out[98]: <a attrs="{'data-toggle': 'pill'}"></a>

Is this a known bug/limitation or am I missing something ? Any hint appreciated !

Solution

Your attribute contains dash so you need a different approach using []

>>> tag2 = soup.new_tag("a")
>>> tag2["data-toggle"] = "pill"
>>> tag2
<a data-toggle="pill"></a>

You can also do:

>>> tag2.attrs["data-toggle"] = "pill"
>>> tag2
<a data-toggle="pill"></a>

Answered By - styvane