javascript écrire une ligne de code html avec un bouton

Question

hey les gars, je suis arrivé jusqu'ici avec un système de chat, mais maintenant je suis bloqué à ce stade.

le script js cherchera un élément appelé le chat et si elle ne se trouve pas, il le mettra avec tous les autres éléments mentionnés ici

<div class='chat' id='chat'><div class='ch' id='ch'><h2>Chat</h2></div><div class='chatbox'><div class='messages'></div><textarea id='message' class='chatinp' rows='3' cols='27'></textarea><button class='send'>Send</button></div></div> 

Mon problème est de savoir comment insérer cette ligne toute code avec javascript dans le document html. comment feriez-vous cela?

Mon script javascript est que vous devez voir

<script type="text/javascript"> 
var num = new Number(); 
num = 0 

function chat(){ 


if(!document.getElementById("chat")){ 
     document.write("<div class='chat' id='chat'><div class='ch' id='ch'><h2>Chat</h2></div><div class='chatbox'><div class='messages'></div><textarea id='message' class='chatinp' rows='3' cols='27'></textarea><button class='send'>Send</button></div></div>") 
} 
else 
{ 
var obj = document.getElementById("chat").cloneNode(true); 
var p = $(".chat"); 
var offset = p.offset(); 
num = num + 1;   

if (num <15) { 
obj.id = obj.id + num; 
document.getElementById("ch").id = obj.id; 
document.body.appendChild(obj); 
document.getElementById("chat").style.left = "700px"; 
} 
} 




} 
</script> 

Answer 1

Ne pas utiliser document.write (il écrase tout dans votre document), mais créer dynamiquement div#chat, quelque chose comme:

if(!document.getElementById("chat")){ 
    var chatdiv = document.createElement('div'); 
    chatdiv.id = 'chat'; 
    chatdiv.className = 'chat'; 
    chatdiv.innerHTML = 
       ['<div class="ch" id="ch">', 
       '<h2>Chat</h2></div>', 
       '<div class="chatbox">', 
       '<div class="messages"></div>', 
       '<textarea id="message" class="chatinp" ', 
       'rows="3" cols="27"></textarea>', 
       '<button class="send">Send</button></div>' 
       ].join(' ') 
    document.body.appendChild(chatdiv); 
}