Enriching HtmlElement with a type property using TypeScript

Question

Enriching HtmlElement with a type property using TypeScript

Check out my TypeScript code snippet below:

let script: HTMLElement = document.createElement("script");
script.appendChild(document.createTextNode(`
  {
    "json": "property"
  }
`));
script.id = 'appContextModel';
document.body.appendChild(script);

But I encountered a specific error:

Uncaught SyntaxError: Unexpected token :

I suspect this error is caused by the missing type property with the value of application/json in the HTMLElement variable. This issue arises when trying to append it to the body.

My goal is to find a way to incorporate the type="application/json" property into the script element using only TypeScript.

angular typescript

Answer 1

Answer №1

If you want to add an attribute to an HTMLElment, all you need to do is use the setAttribute function that belongs to the element:

let newElement: HTMLElement = document.createElement("newElement");
newElement.appendChild(document.createTextNode(`
  {
    "json": "attribute"
  }
`));
newElement.id = 'uniqueID';
newElement.setAttribute('customAttribute', 'example');
document.body.appendChild(newElement);

Alternatively, you can simply update the attribute like this:

newElement.customAttribute = 'example';

Remember to be cautious about security considerations when inserting code directly into a newElement, especially if it's based on user input.

Answer 2

If you want to add an attribute to an HTMLElment, all you need to do is use the setAttribute function that belongs to the element:

let newElement: HTMLElement = document.createElement("newElement");
newElement.appendChild(document.createTextNode(`
  {
    "json": "attribute"
  }
`));
newElement.id = 'uniqueID';
newElement.setAttribute('customAttribute', 'example');
document.body.appendChild(newElement);

Alternatively, you can simply update the attribute like this:

newElement.customAttribute = 'example';

Remember to be cautious about security considerations when inserting code directly into a newElement, especially if it's based on user input.

Enriching HtmlElement with a type property using TypeScript

Answer №1

Similar questions

Refresh a Google chart without having to reload the entire page

Is it necessary to use Generics in order for a TypeScript `extends` conditional type statement to function properly?

The issue of Angular 6 view failing to display accurate data upon page load

There was a mistake: _v.context.$implicit.toggle cannot be used as a function

The ASP.NET Core Web API is designed to handle incoming dates that are one day in the past, as sent by

Old version of Nativescript appium testing being installed ORAn outdated

Rendering illuminated component with continuous asynchronous updates

Unable to capture Metamask Errors

The element type 'x' in JSX does not offer any construct or call signatures

Typescript-powered React component for controlling flow in applications

Tips for identifying two mat-tables within the same component in Angular UI

Creating a unique type with a suffix of `px`

IE11 does not support Angular2 Final

Using TypeScript, add an observable to an array of observables using RxJS

Alert: TypeScript Linter Warning

Executing the ngIf directive in Angular 2 when a function or click event occurs

How to retrieve the value of a nested checkbox in Angular using dynamic methods

Angular array of considerable size

Adding an external JavaScript library file to a specific component in Angular 7 is a straightforward process. Let's walk through the

Angular - Ensure completion of a function call before continuing with the code execution