abp/docs/en/UI/Angular/Dom-Strategy.md

# DomStrategy

`DomStrategy` is a class exposed by @abp/ng.core package. Its instances define how an element will be attached to the DOM and are consumed by other classes such as `LoadingStrategy`.


## API


### constructor

```js
constructor(
  public target?: HTMLElement,
  public position?: InsertPosition
)
```

- `target` is an HTMLElement (_default: document.head_).
- `position` defines where the created element will be placed. All possible values of `position` can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) (_default: 'beforeend'_).


### insertElement

```js
insertElement(element: HTMLElement): void
```

This method inserts given `element` to `target` based on the `position`.


## Predefined Dom Strategies

Predefined dom strategies are accessible via `DOM_STRATEGY` constant.


### AppendToBody

```js
DOM_STRATEGY.AppendToBody()
```

`insertElement` will place the given `element` at the end of `<body>`.


### AppendToHead

```js
DOM_STRATEGY.AppendToHead()
```

`insertElement` will place the given `element` at the end of `<head>`.


### PrependToHead

```js
DOM_STRATEGY.PrependToHead()
```

`insertElement` will place the given `element` at the beginning of `<head>`.


### AfterElement

```js
DOM_STRATEGY.AfterElement(target: HTMLElement)
```

`insertElement` will place the given `element` after (as a sibling to) the `target`.


### BeforeElement

```js
DOM_STRATEGY.BeforeElement(target: HTMLElement)
```

`insertElement` will place the given `element` before (as a sibling to) the `target`.


## See Also

- [DomInsertionService](./Dom-Insertion-Service.md)
- [LazyLoadService](./Lazy-Load-Service.md)
- [LoadingStrategy](./Loading-Strategy.md)
- [ContentStrategy](./Content-Strategy.md)
- [ProjectionStrategy](./Projection-Strategy.md)
docs(core): add how dom strategies work 5 years ago			`# DomStrategy`

			`DomStrategy` is a class exposed by @abp/ng.core package. Its instances define how an element will be attached to the DOM and are consumed by other classes such as `LoadingStrategy`.


			`## API`


docs: refactor api headings 5 years ago			`### constructor`

			```js
			`constructor(`
			`public target?: HTMLElement,`
			`public position?: InsertPosition`
			`)`
			```
docs(core): add how dom strategies work 5 years ago
docs: make constructor arguments more readable 5 years ago			- `target` is an HTMLElement (_default: document.head_).
			- `position` defines where the created element will be placed. All possible values of `position` can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) (_default: 'beforeend'_).
docs(core): add how dom strategies work 5 years ago

docs: refactor api headings 5 years ago			`### insertElement`
docs(core): add how dom strategies work 5 years ago
docs: refactor api headings 5 years ago			```js
			`insertElement(element: HTMLElement): void`
			```
docs(core): add how dom strategies work 5 years ago
docs: refactor api headings 5 years ago			This method inserts given `element` to `target` based on the `position`.
docs(core): add how dom strategies work 5 years ago


			`## Predefined Dom Strategies`

			Predefined dom strategies are accessible via `DOM_STRATEGY` constant.


docs: refactor strategy docs 5 years ago			`### AppendToBody`

			```js
			`DOM_STRATEGY.AppendToBody()`
			```
docs(core): add how dom strategies work 5 years ago
			`insertElement` will place the given `element` at the end of `<body>`.


docs: refactor strategy docs 5 years ago			`### AppendToHead`

			```js
			`DOM_STRATEGY.AppendToHead()`
			```
docs(core): add how dom strategies work 5 years ago
			`insertElement` will place the given `element` at the end of `<head>`.


docs: refactor strategy docs 5 years ago			`### PrependToHead`

			```js
			`DOM_STRATEGY.PrependToHead()`
			```
docs(core): add how dom strategies work 5 years ago
			`insertElement` will place the given `element` at the beginning of `<head>`.


docs: refactor strategy docs 5 years ago			`### AfterElement`

			```js
			`DOM_STRATEGY.AfterElement(target: HTMLElement)`
			```
docs(core): add how dom strategies work 5 years ago
			`insertElement` will place the given `element` after (as a sibling to) the `target`.


docs: refactor strategy docs 5 years ago			`### BeforeElement`

			```js
			`DOM_STRATEGY.BeforeElement(target: HTMLElement)`
			```
docs(core): add how dom strategies work 5 years ago
			`insertElement` will place the given `element` before (as a sibling to) the `target`.




docs: refactor api headings 5 years ago			`## See Also`
docs(core): add how dom strategies work 5 years ago
docs: refactor api headings 5 years ago			`- [DomInsertionService](./Dom-Insertion-Service.md)`
docs: refactor strategy docs 5 years ago			`- [LazyLoadService](./Lazy-Load-Service.md)`
docs(core): add how dom strategies work 5 years ago			`- [LoadingStrategy](./Loading-Strategy.md)`
docs: refactor strategy docs 5 years ago			`- [ContentStrategy](./Content-Strategy.md)`
docs: add link to projection strategies 5 years ago			`- [ProjectionStrategy](./Projection-Strategy.md)`