Блог

Главная - Вопросы по программированию - javascript написать строку html-кода с кнопкой

javascript написать строку html-кода с кнопкой

#javascript

#javascript

Вопрос:

эй, ребята, я зашел так далеко с системой чата, но теперь я застрял на этом этапе.

скрипт js будет искать элемент с именем chat, и если он не найден, он добавит его ко всем другим элементам, указанным здесь 

 <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>

Моя проблема в том, как вставить всю эту строку кода с помощью javascript в html-документ.
как бы вы это сделали?

Мой javascript-скрипт, который вам нужно увидеть

 <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>

Комментарии:

1. Я настоятельно рекомендую использовать библиотеку js, такую как jQuery , для такого рода вещей.

2. я бы хотел, но я тоже хочу немного больше изучить javascript без библиотеки js.

3. Я думаю, вам нужно больше объяснить, что вы пытаетесь сделать.

Ответ №1:

Не используйте document.write (это перезапишет все в вашем документе), но создавайте div#chat динамически, что-то вроде:

 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);
}

[Редактировать 2022] Более современный подход может быть:

 document.querySelector(`#chat`) || (_ => 
  document.body.insertAdjacentHTML(
    `beforeend`, `
    <div 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> 
        <br><button class="send">Send</button>
      </div>
    </div>`)
)();

document.querySelector(`#chat #message`).placeholder = `Type something!`;