0

I am playing around with TypeScript and am trying to create a script that will fetch the HTML values of a div with class and id.

However, I am able to get the result for a class but I cannot fetch the result using getElementById.

The html looks as following:

<button (click)="selectDiv()">select div</button> <div class="container" id="main-wrapper"> <p> Fetch me </p> </div>

And the explore.ts file

selectDiv() { //create a new HTMLElement from nativeElement var hElement: HTMLElement = this.elRef.nativeElement; //now you can simply get your elements with their class name var allDivs = hElement.getElementsByClassName('container')[0]; var getSection = <HTMLElement>document.getElementById["main-wrapper"].innerHTML; console.log(allDivs); console.log(getSection); // returning nothing }

getsection is giving me an error as follows:

ERROR TypeError: Cannot read property 'innerHTML' of undefined

Improve this question
2
  • The preferred way in Angular to obtain an element--if you really need to, which is actually a rare case--is to use ViewChild instead of DOM interfaces such as getElementsByClassName or getElementById. There are good reasons for this, which are too detailed to go into here. Commented May 30, 2017 at 2:41
  • I am trying to make a simple HTML editor using angular2. I am working on my project using angular-cli. In one of my components in need to import the code of my HTML page by doing this: this.document.body.innerHTML += this.get_template_skeleton.template_code2; , once i change the code in need to catch a certain <div>. Commented May 30, 2017 at 2:51

2 Answers 2

Reset to default
1 

function selectDiv() { //create a new HTMLElement from nativeElement // var hElement: HTMLElement = this.elRef.nativeElement; //now you can simply get your elements with their class name var allDivs = document.getElementsByClassName('container')[0]; var getSection = document.getElementById("main-wrapper").innerHTML; console.log(allDivs); console.log(getSection); // returning nothing }
<button onclick="selectDiv()">select div</button> <div class="container" id="main-wrapper"> <p> Fetch me </p> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The demo below shows how to transfer innerHtml from one element to another using both the getElementsByClassName and getElementById methods.

Working JSFiddle demo

HTML

<button onclick="selectDiv()">select div</button> <div class="container" id="main-wrapper"> <p> Fetch me </p> </div> <div id="containerDivByIdResults"> </div> <div id="containerDivByClassResults"> </div>

Typescript

selectDiv = () => { document.getElementById("containerDivByIdResults").innerHTML = document.getElementById("main-wrapper").innerHTML; document.getElementById("containerDivByClassResults").innerHTML = document.getElementsByClassName("container")[0].innerHTML; }
Improve this answer

4 Comments

error: Type 'string' cannot be converted to type 'HTML Element'.
@JessicaStorm Remove the <HTMLElement> type assertion.
@JessicaStorm Looks like there are a couple errors in your TypeScript code. My latest answer simplifies with a working demo link to get you started :)
can you please help me here - stackoverflow.com/questions/44253152/… , i can explain my problem over chat or there as nobody is understanding the problem