:通过javascript创建html元素之后

时间:2015-07-13 19:19:31

标签: javascript css appendchild createelement

我正在创建一个网站,通过ajax调用从db加载内容,然后通过创建元素并将其附加到父级来写入数据。

但是,我的CSS包含了::after元素的一些样式,当我通过JavaScript追加html时没有写入,因为通过JavaScript将元素附加到html会将每个元素直接放在前一个元素的后面。当你写简单的html

时留下空白

相关的css:

.Review .Thumb {
    display: inline-block;
    margin-bottom: 5px;
    width: 15%;
    cursor: hand;
    cursor: pointer;
    zoom: 1;
    *display: inline;
}
.Review .Thumbs:after {
    content: "";
    width: 100%;
    display: inline-block;

    zoom: 1;
    *display: inline;   
}
.Review .Thumb img {
    width: 100%;
}  

相关的自编html:

<div class="Thumbs">
    <div class="Thumb" onClick="ViewThumb(1,1)">
         <img src="images/pictures/pic2.png" id="Review_1_Picture_1" border="0" title="Voorgerecht">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,2)">
         <img src="images/pictures/pic1.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,3)">
         <img src="images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,4)">
         <img src="images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,5)">
         <img src="images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld">
    </div>
</div>

的javascript:

var thumbsDIV = document.createElement('div');
thumbsDIV.className = 'Thumbs';
for(var i=0; i < this.pictures.length; i++) {
    var pictureID = this.pictures[i].pictureID;
    var thumbDIV = document.createElement('div');
    thumbDIV.className  = 'Thumb';
    thumbDIV.onclick = function(){ViewThumb(iD, pictureID);};
    var thumbIMG = document.createElement('img');
    thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID;
    thumbIMG.src = this.pictures[i].picture;
    thumbIMG.title = this.pictures[i].description;
    thumbIMG.border = '0';
    thumbDIV.appendChild(thumbIMG);
    thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
parentDIV.appendChild(picturesDIV);

结果如下所示 自己的HTML: correct

的javascript: incorrect

当我通过开发人员工具编辑所有“Thumb”div在新行上时,一切正常

1 个答案:

答案 0 :(得分:0)

您的CSS看起来格式不正确。为了使样式与多个类一起使用,您需要用逗号分隔它们

http://jsfiddle.net/bgerhards/qdrudpba/

List(Some(node)) => {
    let node = *node; // this moves the value from the heap to the stack
    let ListNode { val, tail } = node; // now this works as it should
    List(Some(Box::new(ListNode { val: val, tail: tail.append(value) })))
}