主页 / 问题 / 692309
Accepted
lounah
Asked:2020-07-14 22:25:19 +0000 UTC2020-07-14 22:25:19 +0000 UTC

单击按钮时动态添加 html 元素

  • 772

你好。有一个简单的 html 表单。单击“提交”按钮时，我想在此表单中添加另一个“聊天自我”元素。我怎样才能做到这一点？我刚开始研究这个。如果有任何链接，我将不胜感激。

<!DOCTYPE html>
<html>
<head>
	<title>ПростоЧат</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>

<body>

	<div class="chatWindow">
		<div class="chatLog">
		
			<div class="chat friend">
				<p class="message-time">11:42</p>
				<p class="name">#1</p>
				<p class="chat-message">Сообщение #1</p>
			</div>
			
			<div class="chat self">
				<p class="message-time">11:43</p>
				<p class="name">#2</p>
				<p class="chat-message">Сообщение #2</p>
			</div>
			
			<div class="chat friend">
				<p class="message-time">11:45</p>
				<p class="name">#1</p>
				<p class="chat-message">Сообщение #3</p>
			</div>
			
			<div class="chat self">
				<p class="message-time">11:47</p>
				<p class="name">#2</p>
				<p class="chat-message">Сообщение #4</p>
			</div>
			

		</div>
		
		<div class="chat-form">
			<textarea></textarea>
			<button>Отправить</button>
		</div>
		
	</div>

</body>

</html>

javascript

2 个回答

  1. Best Answer

    如果你只需要复制DIV你可以使用clone

    但是，在我看来，您不仅需要复制现有的，还需要DIV创建和填写信息，即一个新的。DIV

    var time = '/* вставляете реальное время (через js) */ ';
var name = '/* вставляете имя коментатора */ ';
var count = '/* вставляете порядковый номер комментария */ ';

var html = '<div class="chat self"><p class="message-time">'+time+'</p><p class="name">'+name+'</p><p class="chat-message">Сообщение #'+count+'</p></div>';
    $('.chatLog').append(html);
    • 4

  2. 为了我自己的训练，我感到困惑并编写了这个场景。不要犹豫 ;-)

    function appElem() {
  var appDiv = document.createElement('div'); //добавляем div
  elemP = document.createElement("p");
  elemP2 = document.createElement("p");
  elemP3 = document.createElement("p");
  putDiv = document.querySelector('[class="chatLog"]');
  putDiv.appendChild(appDiv);
  appDiv.setAttribute('class', 'chat self');
  putElemP = document.querySelector('[class="chat self"]:last-child');
  putElemP.appendChild(elemP);
  elemP.setAttribute('class', 'message-time');
  elemP.innerHTML = "your time";
  putElemP.appendChild(elemP2);
  elemP2.setAttribute('class', 'name');
  elemP2.innerHTML = "your name";
  putElemP.appendChild(elemP3);
  elemP3.setAttribute('class', 'chat-message');
  elemP3.innerHTML = "your message";
}
    <div class="chatWindow">
  <div class="chatLog">

    <div class="chat friend">
      <p class="message-time">11:42</p>
      <p class="name">#1</p>
      <p class="chat-message">Сообщение #1</p>
    </div>

    <div class="chat self">
      <p class="message-time">11:43</p>
      <p class="name">#2</p>
      <p class="chat-message">Сообщение #2</p>
    </div>

    <div class="chat friend">
      <p class="message-time">11:45</p>
      <p class="name">#1</p>
      <p class="chat-message">Сообщение #3</p>
    </div>

    <div class="chat self">
      <p class="message-time">11:47</p>
      <p class="name">#2</p>
      <p class="chat-message">Сообщение #4</p>
    </div>


  </div>

  <div class="chat-form">
    <textarea></textarea>
    <button onclick="appElem()">Отправить</button>
  </div>

</div>

    • 1

相关问题