如何通过jquery添加嵌套的div？
如何通过jquery添加嵌套的div？
提问于 2020-06-15 00:16:50
我有以下部分代码在滑块显示：
<div id="st_swiper_block_55">
<img class="st_swiper_image" src="https://domain.ir/upload/stswiper/1slide.jpg" alt=""width="2000" height="750">
</div>我想通过jquery在img标签后面添加嵌套的dive：
<div class="hot-spot" x="300" y="43">
<div class="circle"></div>
<div class="tooltip">
<div class="img-row">
<img src="https://picsum.photos/170/128/?random">
</div>
</div>
</div>我试过了，但不起作用：
$(document).ready(function() {
var divnested = '<div class="hot-spot" x="300" y="43">';
divnested += '<div class="circle"></div>';
divnested += '<div class="tooltip">';
divnested + ' <div class="img-row">';
divnested + ' <img src="https://picsum.photos/170/128/?random" alt="Jurong Lake Gardens #1" width="170" height="128">';
divnested + ' </div>';
divnested + '</div>';
divnested + '</div>';
$("#st_swiper_block_55").append($('divnested'));
});回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-15 00:22:56
这个问题是因为您在一个要追加的jQuery对象中提供了一个选择器字符串，而不是divnested变量。试试这个：
$(document).ready(function() {
var divnested = '<div class="hot-spot" x="300" y="43"><div class="circle"></div><div class="tooltip"><div class="img-row"><img src="https://picsum.photos/170/128/?random" alt="Jurong Lake Gardens #1" width="170" height="128"></div></div></div>';
$("#st_swiper_block_55").append(divnested);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="st_swiper_block_55">
<img class="st_swiper_image" src="https://dev.domain.com/upload/stswiper/1slide.jpg" alt="" width="2000" height="750">
</div>
顺便说一句，要小心地将您自己的非标准属性添加到HTML元素中；在本例中为x和y。如果希望将元数据应用于元素，请改用data属性。
Stack Overflow用户
发布于 2020-06-15 00:22:49
$('divnested')正在DOM中查找标记<divnested></divnested>，但该标记不存在
只需将字符串作为变量追加即可
$("#st_swiper_block_55").append(divnested);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62375177
复制相关文章
相似问题
腾讯云开发者
