How to add div inside the dom element

Question

When I am debugging one of my list I am using something like this.

this.list.dom;

Here What I am getting, some div which I is something like that.

this.list.dom.outerHTML

<div class="x-layer x-combo-list " id="ext-gen389" style="position: absolute; z-index: 12005; visibility: visible; left: 315px; top: 175px; width: 228px; height: 22px; font-size: 11px;">
    <div class="x-combo-list-inner" id="ext-gen390" style="width: 228px; overflow: auto; height: 22px;">
        <div class="loading-indicator">Searching, please wait...</div>
    </div>
</div>`

Now I want to add some div in side the this.list.dom. This should bve like this.

this.list.dom.outerHTML

'<div class="x-layer x-combo-list " id="ext-gen389" style="position: absolute; z-index: 12005; visibility: visible; left: 315px; top: 175px; width: 228px; height: 22px; font-size: 11px;">
    <div class="x-combo-list-inner" id="ext-gen390" style="width: 228px; overflow: auto; height: 22px;">
        <div class="loading-indicator">Searching, please wait...</div>
    </div>
    <div style="border: solid 3px #000; padding: 2px;">Message</div>'

Can anyone suggest me how to add this. I am new in client side.

Possible duplicate of [Insert HTML as a String, without JQuery](https://stackoverflow.com/questions/11422095/insert-html-as-a-string-without-jquery) — caramba, Jul 18 '17 at 06:07
Check this... https://stackoverflow.com/questions/12622465/creating-a-div-element-inside-a-div-element-in-javascript — Harshal, Jul 18 '17 at 06:09
@Harshal ID is generating dynamically. It will change component to component. — shanky singh, Jul 18 '17 at 06:11
@shankysingh Are you trying to show some loading on Combobox while data is being fetched using ExtJS ? — Harshal, Jul 18 '17 at 06:14
Yes, Trying to doing the same, My extJs is 3 so can not use `listconfig` — shanky singh, Jul 18 '17 at 06:15

score 0 · Answer 1 · answered Jul 18 '17 at 06:18

0

You can use set existing HTML string at <template> element, use .insertAdjacentHTML() with "beforeend" as first parameter and HTML string as second parameter

let dom = `<div class="x-layer x-combo-list " id="ext-gen389" style="position: absolute; z-index: 12005; visibility: visible; left: 315px; top: 175px; width: 228px; height: 22px; font-size: 11px;"><div style="border: solid 3px #000; padding: 2px;">Message</div>
    <div class="x-combo-list-inner" id="ext-gen390" style="width: 228px; overflow: auto; height: 22px;">
        <div class="loading-indicator">Searching, please wait...</div>
    </div>
</div>`;

let template = document.createElement("template");

template.innerHTML = dom;

template.content.firstElementChild.insertAdjacentHTML("beforeend", `<div style="border: solid 3px #000; padding: 2px;">Message</div>`);

document.body.innerHTML += template.innerHTML;

answered Jul 18 '17 at 06:18

guest271314

1
15
104
177

`template.content.firstElementChild.insertAdjacentHTML` This is throwing the error by saying ` Cannot read property 'insertAdjacentHTML' of null`. – shanky singh Jul 18 '17 at 06:28
Error is thrown at stacksnippets? – guest271314 Jul 18 '17 at 06:29
No, But I am trying in project there it throwing error. – shanky singh Jul 18 '17 at 06:32
Given description of requirement at original Question no error should be thrown. `this.list.dom.outerHTML` is a string. The string is set at `.innerHTML` of a ` – guest271314 Jul 18 '17 at 06:35
After executing `template.innerHTML = dom;` line when I am checking `template.outerHTML` then I am getting this. `"[object HTMLDivElement]"` – shanky singh Jul 18 '17 at 06:36
@shankysingh Not sure how that is possible. Why do you try to get `.outerHTML` of ` – guest271314 Jul 18 '17 at 06:37
ok, One loast question, Can Not I create a div and `appand` that div to the main div which have id `id="ext-gen389"` – shanky singh Jul 18 '17 at 07:10
Yes, if that is what you want to do – guest271314 Jul 18 '17 at 07:12

How to add div inside the dom element

1 Answers1