ヘッダーを別の行に表示する

Question

2つの単語が別々の行にあるウェブページ上に、「Achievement Unlocked」というテキストのdivを追加しようとしています。私は数多くのことを試しましたが、彼らは同じ行に現れ続けます。

私のコードは次のようななります

var award = document.createElement('div'); // Holds text 
var text = document.createElement('h3'); // contains 'Achievement' 
var text2 = document.createElement('h3'); // contains 'Unlocked' 
$(text).text('Achievement').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'middle', 
    'display':'table-cell', 
    'font-size':'150%' 
}); 
$(text2).text('Unlocked!').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'middle', 
    'display':'table-cell', 
    'font-size':'150%' 
}); 
$(award).css({ 
    'height':'200px', 
    'width':'200px', 
    'background-color':'#cce6ff', 
    'position':'fixed', 
    'bottom':'20%', 
    'left':'50%', 
    'transform':'translate(-50%, 0%)', 
    'border':'5px solid #004080', 
    'border-radius':'100%', 
    'display':'table' 
}).fadeIn(500); 
$(award).append(text, text2); 

は、誰もが、私はdiv要素の途中で別の行に次々にそれらを作ることができる方法のアイデアを持っていますか？

Answer 1

あなたのフィドルは彼らが同じに見えますお互い

$(text).text('Achievement').css({ 
     'color': '#660029', 
     'text-align': 'center', 
     'vertical-align': 'bottom', 
     'display': 'table-cell', 
     'font-size': '150%' 
    }); 
    $(text2).text('Unlocked!').css({ 
     'color': '#660029', 
     'text-align': 'center', 
     'vertical-align': 'middle', 
     'display': 'table-row', 
     'font-size': '150%' 
    }); 

JSFiddle

Answer 2

ただ、この行を追加しますdocument.body.appendChild(award);

https://jsfiddle.net/ytkkbnp1/2/

var award = document.createElement('div'); // Holds text 
var text = document.createElement('h3'); // contains 'Achievement' 
var text2 = document.createElement('h3'); // contains 'Unlocked' 
$(text).text('Achievement').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'bottom', 
    'display':'table-cell', 
    'font-size':'150%' 
}); 
$(text2).text('Unlocked!').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'middle', 
    'display':'table-row', 
    'font-size':'150%' 
}); 
$(award).css({ 
    'height':'200px', 
    'width':'200px', 
    'background-color':'#cce6ff', 
    'position':'fixed', 
    'bottom':'20%', 
    'left':'50%', 
    'transform':'translate(-50%, 0%)', 
    'border':'5px solid #004080', 
    'border-radius':'100%', 
    'display':'table' 
}) 
document.body.appendChild(award); 
$(award).append(text, text2);