Skip to content
Two Mi18n

translateHTML()

Prepare the HTML

Section titled “Prepare the HTML”

Add the data-twomi18n attribute to the elements that need to be translated in the HTML. The value of the attribute is the translation key.

<h1 data-twomi18n="hello"></h1>

The translateHTML method is the method that will translate all the elements with the data-twomi18n attribute.

It takes one argument:

twoMi18n.translateHTML("fr");

Translate HTML attributes

Section titled “Translate HTML attributes”

The translateHTML method can also translate HTML attributes. Add the attribute name after the translation key between brackets to specify the attribute to translate.

<input type="text" data-twomi18n="hello[placeholder]"></input>

You can translate multiple attributes by separating them with a space.

<input type="text" data-twomi18n="world hello[placeholder] world[title]"></input>

Note: When the attribute is not specified, the innerText attribute is used.

The library is using the Element.setAttribute() method, so any valid attributes you put in the bracket annotation are going to work.

Example

Section titled “Example”
<head>
  <script defer src="https://unpkg.com/two-mi18n@latest/dist/TwoMi18n.umd.js"></script>
</head>


<h1 data-twomi18n="hello"></h1>
<input type="text" data-twomi18n="world hello[placeholder] world[title]"></input>


<script defer>
  const translations = {
    default: "en",
    en: {
      hello: "Hello",
      world: "World",
    },
    fr: {
      hello: "Bonjour",
      world: "Monde",
    },
  };


  const twoMi18n = new TwoMi18n(translations);


  twoMi18n.translateHTML("fr");
</script>

See more examples here.

See Fallbacks.