从textarea Javascript将内容插入div

Question

我正在建立聊天，我需要在单击发送时将文本区域的内容附加到内部div

<div class="inner" id="inner">
     <div class="incoming" id="incoming">
         <div class="them" id="them">Lorem
         </div>
     </div>
     <div class="outgoing" id="outgoing">
         <div class="me" id="me">Lorem ipsum
     </div>
     </div>
 </div> 

按钮和文本区域代码是

    <textarea class="input" id="input" placeholder="Message.."></textarea>
    <a class="waves-effect waves-light" id="send-btn" >Send</a>

使用Javascript

var sendButton= document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv= document.getElementById('inner');
var message=textArea.value;

sendButton.addEventListener('click', function(){
    innerDiv.innerHTML=meMessage;
});  

var meMessage= '<div class="outgoing" id="outgoing">'+
    '<div class="me" id="me"></div></div>';

我想做的是，当我单击发送时，将文本区域的文本值显示在称为“ me”的内部div上，并且还获取了textarea的值以将其保存到数据库。 我怎样才能做到这一点

Answer 1

首先，您不应该手动创建html元素，因为它们很容易受到XSS攻击，并了解有关逃避机制以防止注入恶意代码的信息。 尝试使用document.createElement('div'); 使用有效的innerText创建div的方法。

以后使用方法：

 innerDiv.appendChild(createdElement);

追加元素。

您可以创建构建器来构建所需的html元素，并且必须对div元素内的文本进行htmlEncode。

 const sendButton = document.getElementById('send-btn'); const textArea = document.getElementById('input'); const innerDiv = document.getElementById('inner'); var message = textArea.value; sendButton.addEventListener('click', function () { const message = new MessageContainerBuilder().BuildMessage(textArea.value); innerDiv.appendChild(message); textArea.value = ''; }); function encodeHtmlEntity(input) { var output = input.replace(/[\ -\香<>\\&]/gim, function (i) { return '&#' + i.charCodeAt(0) + ';'; }); return output; } function MessageContainerBuilder() { var createDivElement = function (classTest) { var div = document.createElement('div'); var classAttr = document.createAttribute('class'); classAttr.value = classTest; div.setAttributeNode(classAttr); return div; }; var createSpanElement = function (value, classTest) { var span = document.createElement('span'); if (classTest) { var classAttr = document.createAttribute('class'); classAttr.value = classTest; span.setAttributeNode(classAttr); } span.innerText = encodeHtmlEntity(value); return span; }; this.BuildMessage = function (text) { var divContainer = createDivElement('outgoing'); var messageSpan = createSpanElement(text, 'me'); divContainer.appendChild(messageSpan); return divContainer; }; } 

 <div id="inner"> <div class="incoming"> <div class="them">Lorem </div> </div> <div class="outgoing"> <div class="me">Lorem ipsum </div> </div> </div> <textarea class="input" id="input" placeholder="Message..."></textarea> <button class="waves-effect waves-light" id="send-btn">Send</button> 

更新 ：扩展代码段代码。 已删除ID，因为不应在此处使用它们来创建具有相同ID的多个消息元素。 将锚点更改为按钮。

Answer 2

您需要点击链接来获取textarea的值

 var sendButton = document.getElementById('send-btn'); var textArea = document.getElementById('input'); var innerDiv = document.getElementById('inner'); var message = textArea.value; sendButton.addEventListener('click', function() { innerDiv.innerHTML = `<div class="outgoing" id="outgoing">${textArea.value} <div class="me" id="me"></div></div>`; }); 

 <div class="inner" id="inner"> <div class="incoming" id="incoming"> <div class="them" id="them">Lorem </div> </div> <div class="outgoing" id="outgoing"> <div class="me" id="me">Lorem ipsum </div> </div> </div> <textarea class="input" id="input" placeholder="Message.."></textarea> <a class="waves-effect waves-light" id="send-btn">Send</a> 

Answer 3

innerDiv.append(message)

代替

innerDiv.innerHTML=message

Answer 4

您可以使用它。 您的邮件变量未收到textarea值

 var sendButton= document.getElementById('send-btn'); var innerDiv= document.getElementById('inner'); sendButton.addEventListener('click', function(){ innerDiv.innerHTML=innerDiv.innerHTML+'<div class="outgoing" id="outgoing">'+document.getElementById('input').value+ '<div class="me" id="me"></div></div>'; }); 

 <div class="inner" id="inner"> <div class="incoming" id="incoming"> <div class="them" id="them">Lorem </div> </div> <div class="outgoing" id="outgoing"> <div class="me" id="me">Lorem ipsum </div> </div> </div> <textarea class="input" id="input" placeholder="Message.."></textarea> <a class="waves-effect waves-light" id="send-btn" >Send</a> 

Answer 5

也许用那代替你的js：

document.getElementById('send-btn').addEventListener('click', 
    function(){
        var userInput = document.getElementById('input').value;
        if(userInput) { document.getElementById('me').innerHTML += '<br>' + userInput; }
    }
);

那应该让您向前迈进...祝您好运到DB。