2.6 Modern {htmltools}

• This section requires a basic understanding of CSS selectors, therefore, let’s start with a demo.

• As of htmltools 0.5.2, the tagQuery function allows for more efficient and readable manipulation of HTML elements, using a syntax similar to jQuery.

• Two ways to modify a span which is a third child:

  spans <- div(div(p(), map(1:5, \(i) span(i))))
  spans$children[[1]]$children[[2]][[3]]$attribs$class <- "test" 
  
  spans

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

  spans <- div(div(p(), map(1:5, \(i) span(i))))
  spans <- tagQuery(spans)$
    find("span")$
    filter(\(x, i) i == 3)$
    addAttrs("class" = "amazing-tag")$
    allTags()
  
  spans

  <div>
    <div>
      <p></p>
      <span>1</span>
      <span>2</span>
      <span class="amazing-tag">3</span>
      <span>4</span>
      <span>5</span>
    </div>
  </div>

• The biggest advantage is that is does not always depend on the overall tag structure:

  spans <- div(div(p(), div(map(1:5, \(i) span(i)))))
  spans <- tagQuery(spans)$
    find("span")$
    filter(\(x, i) i == 3)$
    addAttrs("class" = "amazing-tag")$
    allTags()
  
  spans

  <div>
    <div>
      <p></p>
      <div>
        <span>1</span>
        <span>2</span>
        <span class="amazing-tag">3</span>
        <span>4</span>
        <span>5</span>
      </div>
    </div>
  </div>