使用img动态创建div并将其附加到现有div

时间:2016-02-22 21:59:49

标签: javascript jquery

所以我尝试通过div函数

创建HTML createPost()元素

然后通过img函数

添加HTML addElements()元素

然后将div附加到已创建的div id="posts-div"

但是我的脚本似乎有问题,因为div没有附加

整个脚本当然包含在$(document).ready

var testimg = 'images/1.png'
function createPost(){
    var post = document.createElement('div');
    post.className += 'col-md-3';
    post.className += 'col-sm-6';
    post.className += 'col-xs-12';
    post.className += 'post';
}          
function addElements(){
    var img = document.createElement('img');
    img.src = testimg;
    img.alt = 'post';
    img.className += 'img-responsive';
    $(post).append(img);    
}
createPost();
addElements();     
$('#posts-div').append(post);

3 个答案:

答案 0 :(得分:2)

这是我认为更好的另一个版本。

var testimg = 'images/1.png';
var post;
var img;
function createPost(){
    post = $('<div/>',{ class:"col-md-3 col-sm-6 col-xs-12 post" }).appendTo("#posts-div");
}          

function addElements(){
    img = $('<img/>',{ src:testimg , alt:'post',class:'img-responsive' }).appendTo(post); 
}
createPost();
addElements();    

示例:https://jsfiddle.net/DinoMyte/b8tetvhh/1/

答案 1 :(得分:1)

变量postcreatePost()函数中定义,这意味着当您尝试追加它时它不在范围内 - 它只存在于createPost()函数中。在post函数之外定义createPost(),它将全局可访问,并且应该可以正常工作。

e.g。

 var testimg = 'images/1.png'
 var post;
 function createPost(){
     post = document.createElement('div');
     post.className += 'col-md-3';
     post.className += 'col-sm-6';
     post.className += 'col-xs-12';
     post.className += 'post';
 }          
 function addElements(){
     var img = document.createElement('img');
     img.src = testimg;
     img.alt = 'post';
     img.className += 'img-responsive';
     $(post).append(img);    
 }
 createPost();
 addElements();     
 $('#posts-div').append(post);

答案 2 :(得分:0)

由于您使用的是jQuery,因此您的代码可能是:

library(purrr)
library(dplyr)
library(broom)
library(tidyr)
library(pipeR)

mtcars %>>%
  (split(.,.$cyl)) %>>%
  (split_cyl~
    names(split_cyl) %>>%
     (
       cross_d(
         list(against=.,tested=.),
         .filter = `==`
       )
     ) %>>%
     by_row(
       ~tidy(t.test(split_cyl[[.x$tested]]$mpg,split_cyl[[.x$against]]$mpg))
     )
  ) %>>%
  unnest()

希望这有帮助。