如何将图像添加到锁定的html代码中

Question

我遇到了一个大问题。我想在html代码中添加一个图像。只要我能访问html代码就没什么大不了的了。不幸的是，它被锁定了，看起来像这样：

<ul class="cc-nav-level-0 j-nav-level-0">
<li id="cc-nav-view-1691317785" class="jmd-nav__list-item-0 j-nav-has-children cc-nav-parent j-nav-parent jmd-nav__item--parent">
<a href="/sound-packs/" data-link-title="Sound Packs">Sound Packs</a>
<span data-navi-toggle="cc-nav-view-1691317785" class="jmd-nav__toggle-button"></span>
</li>
<li id="cc-nav-view-1691317885" class="jmd-nav__list-item-0">
<a href="/apps/" data-link-title="Apps">Apps</a>
</li>
<li id="cc-nav-view-1691318285" class="jmd-nav__list-item-0">
<a href="/comments/" data-link-title="Comments">Comments</a>
</li>
<li id="cc-nav-view-1701055985" class="jmd-nav__list-item-0">
<a href="#news" data-link-title="News" class="sub hide-lnk">News</a> 
</li>
</ul>

我想添加的图像应该在字体的右边。有没有办法以某种方式插入代码？

Answer 1

当然，你应该能够做你想做的事。查看jQuery命令：.append()、.html()等。例如：

请注意，您也可以以相同的方式注入新的CSS。。。

$(function(){
var newstuff = '
<style>
#new{color:red;}
</style>
<div id="new">Here is a newly-injected DIV</div>
';
$('#mt').html(newstuff);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="mt">You can replace what is there with modified/enhanced code.</div>

Answer 2

您可以尝试链接一个在DOM加载后插入元素的脚本。类似这样的东西：

document.addEventListener('DOMContentLoaded', ()  => {
document.querySelector('ul').insertAdjacentHTML('afterend', '<div></div>')
})

然后你可以使用内联样式使其成为你想要的任何高度、宽度和背景：

<div style="height:300px;width:300px;background:url(yourImg.jpg);></div>

我做了一支钢笔，让你看看它是什么样子的。