Как применить стили к div, созданные javascript?

Question

Я создал два divs, используя javascript appendChild. Я хочу применить стили к этим div, но стили не работают. Вот код JavaScript. (Я хочу, чтобы применить стили только файл CSS, не используя JavaScript.)

function list(){ 
for(var i=0;i<questions.length;i++) 
{ 
    var element = document.createElement("test1"); 
    element.appendChild(document.createTextNode(questions[i].ques)); 
    document.getElementById("test").appendChild(element); 

    var br = document.createElement("br"); 
    element.appendChild(br); 

    var element1 = document.createElement("test2"); 
    element1.appendChild(document.createTextNode(questions[i].answers[0].answer)); 
    document.getElementById("test").appendChild(element1); 
} 

}

мой CSS код для test1 и test2 ниже, который не работает.

#test1{ 
    text-align: justify; 
    //text-justify:inter-word; 
    letter-spacing: -0.5px; 
    font-weight: bold; 
    color: #333; 
    font-weight: 500; 
    position: relative; 
    margin-bottom: 16px; 
    padding-bottom: 8px; 
    font-size: 19px; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    line-height: 1.25; 
} 
#test2{ 
    font-size: 130px; 
} 

Answer 1

Хотя я не знаю, почему вы хотите создать <test1> и <test2> тегов, вы можете применить стиль к нему:

test1{ 
    text-align: justify; 
    //text-justify:inter-word; 
    letter-spacing: -0.5px; 
    font-weight: bold; 
    color: #333; 
    font-weight: 500; 
    position: relative; 
    margin-bottom: 16px; 
    padding-bottom: 8px; 
    font-size: 19px; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    line-height: 1.25; 
} 
test2{ 
    font-size: 130px; 
} 

Вместо этого вы можете создать DIV и присоединить идентификатор к этим диве:

var elem1= document.createElement("div"); 
elem1.id = "test1"; 
elem1.appendChild(document.createTextNode(questions[i].ques)); 
document.getElementById("test").appendChild(elem1); 

var elem2= document.createElement("div"); 
elem2.id = "test2"; 
elem2.appendChild(document.createTextNode(questions[i].ques)); 
document.getElementById("test").appendChild(elem2); 

Answer 2

var element = document.createElement("div"); 
element.id = "test1"; 
element.className = "your_css_class_name"; 
element.appendChild(document.createTextNode(questions[i].ques)); 
document.getElementById("test").appendChild(element); 

... 

//CSS 

.your_css_class_name { 
    ... 
} 

Answer 3

Использование document.createElement("test1") создает <test1> Ele в вашем документе. Предположительно, вы хотите, чтобы это было <div> или <span>? В этом случае вам код должен быть что-то вроде:

var element = document.createElement("div"); 
element.id = "test1"; 
element.appendChild(document.createTextNode(questions[i].ques)); 
document.getElementById("test").appendChild(element); 

, а также использовать правильный элемент, то вам необходимо установить идентификатор так применяется CSS.

Затем сделать то же самое снова «test2», создавая соответствующий элемент затем установить идентификатор на нем «test2" .