在将element1追加到文档之前,先将element2追加到element1
Append element2 to element1 before appending element1 to document
我想用jQuery动态地创建一个元素,并在其中动态地放置另一个元素
例如,我希望输出看起来像这样:
<span class="imageContainer">
<p>Close</p>
<img src="image.jpg" />
<span>
我可以使用以下方法,但它阻止我使用其他提供属性的方法:
$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>').prependTo('body');
我目前正在用这段代码创建span元素,我想知道如何在将代码附加到任何东西之前将其附加到它,这可能是一个我忽略的简单解决方案:
$('<span/>', {
'id': 'imageContainer'
});
我想使用这个方法的原因是,这样我就可以一次性附加点击方法等等。
更新的解决方案(感谢@ParvSharma(:
function hoverBox( url, e ) {
var hoverbox = $( '<span/>', {
'id': 'imageContainer',
'style': 'top:'+e.pageY+'px; left:'+e.pageX+'px;'
}).append(
$('<p/>', {
html: 'Close',
click: function() {
var parentContainer = '#'+$(this).parent().attr('id');
destroy( parentContainer );
}
})
).append(
$('<img/>', {
'src': url
})
);
return hoverbox;
}
-
使跨度
var span = $('<span/>', { 'id': 'imageContainer'});
-
然后只做
span.append($("<p></p>"));
-
然后jo
span.append($("<img></img>"));
- 现在将span附加到要附加到的任何对象
试试这个:
$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>')
.find('p')
.click(function() {
// click code here.
})
.end()
.prependTo('body');
试试这个
$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>').find("img").attr({}).end().prependTo('body');
您也可以根据自己的需求使用它。
$('<span/>', {
'id': 'imageContainer'
}).append('<p>Close</p><img src="image.jpg" />')
.prependTo('body');
$('<span/>', {'id':'theId'}).click(....);
使用jQuery创建元素后,它将返回该元素的jQuery对象…
相关文章:
- 表追加而不附加最后一个元素
- 如何在jquery中停止在更改时追加值
- JQuery.on(“keydown”)追加到页面时不工作
- jQuery[button.class]未检测到用按钮追加行
- 使用jQuery'生成输入字段;s追加
- js”;在“;不按特定顺序追加键/值
- 如何在 ReactJs 中追加到表
- 文本框仅接受十进制值,并且应在十进制后追加2个零
- 为什么DocumentFragment在追加后被清除
- 正在从JQuery追加Laravel Blade
- 有什么方法可以在下一个元素上进行追加吗
- jQuery-根据值在输入字段后追加图像
- jQuery动态使用.append()添加输入,但发布表单不是追加数据
- 追加Jquery后的Binding Click事件不起作用
- 包含数组的对象的QML ListModel追加中断
- JQuery追加到父级,只要它's已创建
- 在事件目标上,将css波浪号从element1添加到element2
- 一个接一个地追加两次
- 如何仅在数组没有的情况下追加到数组't包含带有rethinkDB的值
- 在将element1追加到文档之前,先将element2追加到element1