How to add tags inside a div

Hello! In the code below i successfully retrieve the div#links element but don’t know how I can add a tag elements inside the div.

Here is my code so far

const links_arr = {
  "portfolio": "",
  "github": "",
  "linkedin": ""

const static_url = ""
addEventListener("fetch", event => {
  return event.respondWith(

class LinksTransformer {
  constructor(links) {
    this.links = links
    console.log("in constructor!");

  element(element) {
    // element handler

function handleJSON(req){
  let link_str = JSON.stringify(links_arr, null, 2)
  return new Response(link_str, {
    headers: {
      "content-type": "application/json;charset=UTF-8"

async function handleRequest(request) {
  let url_split = request.url.split("/")


    case "link":

      const res     = await fetch(request)
      const url_res = await fetch(static_url)

      return new HTMLRewriter()
                 .on("div#links", new LinksTransformer(links_arr))

And the code I’m trying to achieve

<div id="links">
  <a href="">A sample URL</a>
  <a href="">Another sample URL</a>
  <a href="">A final sample URL</a>

You can insert HTML inside an element using the prepend and append methods on the element value. For this case, you’ll want to append multiple a elements to the element like so:

element(element) {
    for (const [text, link] in Object.entries(this.links)) {
        element.append(`<a href="${link}">${text}</a>`, { html: true })

For more info on HTMLRewriter APIs, see the docs.

1 Like