如何在dom元素中添加div答案

【问题标题】：How to add div inside the dom element如何在dom元素中添加div
【发布时间】：2017-12-22 20:15:27
【问题描述】：

当我调试我的列表之一时，我正在使用类似的东西。

this.list.dom;

这是我得到的，一些 div，我是这样的。

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>`

现在我想在this.list.dom 旁边添加一些 div。这应该是这样的。

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.

【问题讨论】：

Insert HTML as a String, without JQuery的可能重复
检查这个...stackoverflow.com/questions/12622465/…
@Harshal ID 正在动态生成。它将组件更改为组件。
@shankysingh 您是否在使用 ExtJS 获取数据时尝试在 Combobox 上显示一些加载？
是的，尝试做同样的事情，我的 extJs 是 3 所以不能使用listconfig

标签： javascript html dom extjs

【解决方案1】：

您可以在<template> 元素处设置现有的HTML 字符串，使用.insertAdjacentHTML() 和"beforeend" 作为第一个参数，HTML 字符串作为第二个参数

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;

【讨论】：

template.content.firstElementChild.insertAdjacentHTML 这是通过说`Cannot read property 'insertAdjacentHTML' of null`来抛出错误。
stacksn-ps 抛出错误？
不，但我正在那里的项目中尝试它抛出错误。
鉴于原始问题的要求描述，不应抛出错误。 this.list.dom.outerHTML 是一个字符串。该字符串设置在<template> 元素的.innerHTML。在template.content 的.firstElementChild 结尾之前插入一个HTML 字符串<div style="border: solid 3px #000; padding: 2px;">Message</div>。您可以使用.innerHTML 获取template 元素的HTML 内容@
当我检查template.outerHTML 时执行template.innerHTML = dom; 行之后，我得到了这个。 "[object HTMLDivElement]"