html动态追加文本内容,Js动态添加的html内容怎样用css渲染

你在html中给的是

而你的css 是 .list label

当然没效果了。

改一下，把css的改成：

#list label {

color: red;

font-family: Open Sans Condensed;

font-size: 16px;

}

#list input [type="checkbox"] {

margin-left: unset;

}

[更新]

css:

#list{

text-align: center;

}

#list h1{

text-align: left;

}

#list label {

color: red;

font-family: Open Sans Condensed;

font-size: 16px;

}

#list input [type="checkbox"] {

margin-left: unset;

}

html

Your Lists

js (下面函数只是示例)

function addLine() {

var issues = 'aaaa', begins = '20170908', deadline = '20160908';

var div = document.createElement("div");

var addtask = document.createElement("label");

addtask.innerHTML = issues + " form " + begins + " to " + deadline;

var taskcheck = document.createElement("input");

taskcheck.type = "checkbox";

var taskbox = document.getElementById("list");

div.appendChild(addtask);

div.appendChild(taskcheck);

taskbox.appendChild(div);//添加任务

}

addLine();

addLine();

addLine();

addLine();

addLine();

addLine();

addLine();