JavascriptでHTMLを欺く方法

Question

私は、1つのメッセージをスタイリングの上に表示します。 例：'<span style="color: rgb(255, 0, 0);">Hello</span>',

javascript変数にどのように宣言して、必要な場所にテキストを設定できますか？

私はこのように設定しています。 this.header.setHtml("Hello");これはうまくいきますが、いくつかのclsを入れたいと思います。これを達成する方法。

Answer 1

おそらくあなたは

var spanEle = '<span style="color: rgb(255, 0, 0);">Hello</span>'; 
this.header.setHtml(spanEle); 

Answer 2

があなたのヘッダが続いてHTMLを設定すること

document.getElementById("header").innerHTML = '<span style="color: rgb(255, 0, 0);">Hello</span>'; 

ほど簡単でなければなりません

<h1 id="header"></h1> 

あるとしたいあなたがする必要があるのはどのように把握されますその特定の要素に到達する

ヘッダ要素が

<span class="header"></span> 

ある場合、例えば

は、次いで、ここで

document.querySelector(".header").innerHTML = '<span style="color: rgb(255, 0, 0);">Hello</span>'; 

Answer 3

する、いくつかの異なる方法

function appendMessage(text){ 
 
    document.getElementById('message').append(text); 
 
} 
 

 
appendMessage('Hello '); 
 
appendMessage('world'); 
 

 

 
function appendHtml(html){ 
 
    document.getElementById('output1').innerHTML += html; 
 
} 
 

 
appendHtml('<span class="green">Hello </span>'); 
 
appendHtml('<span class="red">World </span>'); 
 

 
function setHtml(value){ 
 
    document.getElementById('output2').innerHTML =value; 
 
} 
 

 
setHtml('<span class="green">Hello </span>'); 
 
setHtml('<span class="red">World </span>'); 
 

 
//then if you would like you can use prototype to extend Element to add setHtml 
 
Element.prototype.setHtml = function(html){ 
 
    this.innerHTML = html; 
 
} 
 

 
//you can then use it like this 
 
document.getElementById('prototype_example').setHtml('<span class=red>This works too!</span>');

#message, .red{ 
 
    color: rgb(255, 0, 0); 
 
} 
 

 
.green{ 
 
    color: rgb(0,188, 50); 
 
}

<span id=message></span> 
 
<br /> 
 
<span id=output1></span> 
 
<br /> 
 
<div id=output2></div> 
 
<br/> 
 
<div id="prototype_example"></div>