Question

当我调试我的一个列表时，我正在使用这样的东西。

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.

Answer 1

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

＆＃13;

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;

＆＃13;

如何在dom元素中添加div

1 个答案: