Useful functions for tags

• The htmltools package provides us with functions to shorten the type of HTML transformation seen in the previous example.

Add attributes

• Append one or more attributes to an HTML element via the tagAppendAttributes() function:

  myTag <- div("Some div")
  myTag <- tagAppendAttributes(
    myTag,
    id = "someId",
    class = "someClass",
    `data-toggle` = "tabs"
  )
  
  myTag

  <div id="someId" class="someClass" data-toggle="tabs">Some div</div>

Check if an element has an specific attribute

• Function: tagHasAttribute()

• Example: Does this div element have a class?

  myTag <- div(class="myClass")
  tagHasAttribute(myTag, "class")

  [1] TRUE

Get the attribute value of an element

• The tagGetAtribute() function returns the target’s attribute value, if it exists, otherwise NULL.

• Example:

  myTag <- div(class = "test", `data-toggle` = 1)
  tagGetAttribute(myTag, "class")

  [1] "test"

  tagGetAttribute(myTag, "data-toggle")

  [1] "1"

Replace children

• The tagSetChildren() function creates children for a given element, removing the already existing ones, if they actually exist.

• Example:

  myTag <- div(
    class = "parent",
    p("Son")
  )
  
  myTag <- tagSetChildren(
    myTag, 
    # Only daughters now
    tagList(
      p("Daughter 1"),
      p("Daughter 2")
    )
  )
  
  myTag

  <div class="parent">
    <p>Daughter 1</p>
    <p>Daughter 2</p>
  </div>

Add child or children

• Add one child with tagAppendChild(), or many, with tagAppendChildren(), to an HTML element.

• Example:

  myTag <- div(
    class = "parent",
    p("Son")
  )
  myTag <- tagAppendChild(
    myTag, 
    p("Daughter")
  )
  
  myTag

  <div class="parent">
    <p>Son</p>
    <p>Daughter</p>
  </div>

Build your own functions

• Create a function to remove the nth child:

  myTag <- div(
    class = "parent", 
    p("Favourite son"),
    p("Least favourite son")
  )
  
  tagRemoveChild <- function(tag, n) {
    # Check if there are no children
    if (length(tag$children) == 0) {
      stop(paste(tag$name, "does not have any children!"))
    }
    tag$children[n] <- NULL
    tag
  }
  myTag <- tagRemoveChild(myTag, 2)
  
  myTag

  <div class="parent">
    <p>Favourite son</p>
  </div>

• Create a function to insert the nth child:

  tagInsertChild <- function(tag, child, position) {
    tag$children <- append(tag$children, list(child), position - 1)
    tag
  }
  
  res1 <- tagInsertChild(p(span("hello")), a(), 1)
  res2 <- tagInsertChild(p(span("hello")), a(), 2)
  
  res1

  <p>
    <a></a>
    <span>hello</span>
  </p>

  res2

  <p>
    <span>hello</span>
    <a></a>
  </p>

Other functions

The golem package contains more functions to edit HTML elements, such as the tagRemoveAttributes() function.

Conditionally set attributes

Remember that you can use the ifelse() function if you want to set some HTML element’s attribute only under specific conditions.

Using the pipe operator

These last functions work well with the pipe operator:

div(
  class = "someClass",
  h1("Hello")
) |>
  tagAppendAttributes(
    id = "someId"
  ) |>
  tagAppendChild(
    p("some extra text")
  )

<div class="someClass" id="someId">
  <h1>Hello</h1>
  <p>some extra text</p>
</div>

Programatically create children elements

• The lapply() and purrr:map() functions can be used to programatically create children elements:

  # Create 5 children
  library(purrr)
  map(1:5, \(x) span(x)) |>
    div() |>
    tagAppendAttributes(
      class = "parent"
    )

  <div class="parent">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>