How to add a div inside a dom element
When I debug one of my lists I use something like this.
this.list.dom;
Here is what I get, some divs that I do something 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>`
Now I want to add a div to the side this.list.dom
. It should be 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.
source to share
You can use an existing string HTML
in the element <template>
, use .insertAdjacentHTML()
c "beforeend"
as the first parameter and HTML
string as the 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;
source to share