Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 86cb8d5

Browse files
adding new topic to the DOM file, and add links to table of content
1 parent b78a917 commit 86cb8d5

File tree

2 files changed

+69
-0
lines changed

2 files changed

+69
-0
lines changed

‎04_dom.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,73 @@ heading.textContent = 'Cool things';
353353
myDiv.insertAdjacentElement('afterbegin',heading);
354354
```
355355

356+
<br>
357+
358+
<a name="HTMLFromStringsAndXSS"></a>
359+
## **HTML from strings and XSS**
360+
361+
This is a different approach using bacticks strings that we learn earlier, there is a potential security hole related to XSS (Cross-site scripting), that we learn how to prevent on the Security Section of this course.
362+
363+
Similar to ```innerText``` awe can use **```innerHTML```** as a setter, using strings instead of regular document.createElement, with ```innerHTML``` you can create tags, also we can interpolate values easily, and if its a valid HTML the browser will take it and parse it into all the items:
364+
365+
Example:
366+
we have the following HTML and we want to add an image with source and description, that will be inside a ```div``` with a class or wrapper:
367+
368+
```HTML
369+
<article class="item">
370+
371+
</article>
372+
```
373+
In javascript:
374+
375+
```js
376+
const item = document.querySelector('.item');
377+
378+
const src = `https://picsum.photos/200`;
379+
const desc = `cute pup`;
380+
381+
const myHTML = `
382+
<div class="wrapper">
383+
<h2>${desc}</h2>
384+
<img src="${src}" alt="${desc}"/>
385+
</div>
386+
`;
387+
```
388+
389+
But these are not elements are strings, you can check by using
390+
```typeof myHTML```, meaning that we can't add classes, it only becomes an element by dump it into the DOM by setting the ```innerHTML``` like:
391+
392+
```js
393+
item.innerHTML = myHTML;
394+
```
395+
Now you can add classes or whatever you want.
396+
397+
There is a ways you can do the same without ```innerHTML``` is:
398+
- ```document.createRange().createContextualFragments()```
399+
400+
using this, the HTML will not be visible in the page, but you will be able to select it using javascript.
401+
So lets turn **myHTML** from the example before into a DOM element using ```document.createRange()```
402+
403+
```js
404+
const myFragment = document.createRange().createContextualFragment(myHTML);
405+
```
406+
407+
now we can add the fragment into the page by using ```append```, ```appendChild``` or ```insertAdjacent```:
408+
409+
```js
410+
document.body.appendChild(myFragment);
411+
```
412+
413+
<br>
414+
415+
<a name="TraversingAndRemovingNodes"></a>
416+
## **Traversing and removing nodes**
417+
418+
419+
420+
421+
422+
356423

357424

358425
<br>

‎tableOfContent.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,5 @@
3737
* [Working with classes](04_dom.md#workingWithClasses)
3838
* [Build in and custom data attributes](04_dom.md#BuildInAndCustomDataAttributes)
3939
* [Creating HTML](04_dom.md#CreatingHTML)
40+
* [HTML from strings and XSS](04_dom.md#HTMLFromStringsAndXSS)
41+
* [Traversing and removing nodes](04_dom.md#TraversingAndRemovingNodes)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /