Question

$(document.createElement('div'))
.attr({
    'class':'sniper-alert'
})
.html(words)
.css({
    'position':'fixed',
    'width':'30%',
    'height':'30%',
    'box-shadow':'0 1px 3px #888',
    'top':'30%',
    'left':'50%',
    'transform':'translate(-50%, -50%)'
})
.fadeIn()
.prependTo('body');

嗨，我这里遇到了问题。我只是想问一下如何在我的div中创建另一个元素。我想在上面添加按钮。我正在制作自己的警报类型框。非常感谢那些想要帮助的人

Answer 1

主要有两种方式：element.appendChild(node)和element.innerHTML = "html-as-string"。这两个都有jQuery等价物，但普通的javascript似乎对我来说同样容易/支持。

对于按钮，您的脚本可能类似于

var elem = $("div-id"); // the code in the question has no id, but you'll need some way to select the div
var button = document.createElement("input");
button.type = "button";
button.innerHTML = "Click Me!";
elem.appendChild(button);

这是未经测试的，可能有拼写错误。希望它有所帮助。

Answer 2

在将新<div>添加到文档之前，您可以附加另一个元素;在这个例子中，它将被放在文本内容之后：

＆＃13;

$('<div>', {
  class: 'sniper-alert',
  html: 'words',
  css: {
    'position':'fixed',
    'width':'30%',
    'height':'30%',
    'box-shadow':'0 1px 3px #888',
    'top':'30%',
    'left':'50%',
    'transform':'translate(-50%, -50%)'
  }
})
.append('<button>button</button>')
.fadeIn()
.prependTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

你可以附加任何你喜欢的东西，包括另一个jQuery对象。

Answer 3

尝试这个jquery函数“append（）”这将附加在div选择器的末尾。就像那样：

$("#div_id").append("<input type='button' id='clickbtn' name='Click' value='Click
> Button'>");

如果您想在该按钮上执行click事件，则需要绑定click事件，如下所示：

$("#clickbtn").on('click',function(){
// Your Code
});

在创建的元素中添加另一个元素

3 个答案: